Vue 之 组件传值
传值
1、父组件给子组件传值
思路：
–> 父组件的template 标签内，给子组件标签设置属性（属性值为父组件的数据属性名）
–> 在子组件的components设置 props:[‘属性名’]
–> 子组件的template内通过｛｛属性名｝｝直接绑定数据
实现关键代码：
<template id="par">
<div>
<p>{{ title }}</p>
<v-chi :name="title"></v-chi> # （1）父组件内子组件绑定属性（获取数据）
</div>
</template>
components: { "v-chi": { template: "#chi", props: ["name"] } } # （2）子组件设置 pros（传递给子组件）
<template id="chi">
<div>
<div>子组件</div>
<p>{{ name }}</p> # （3）子组件内绑定数据 （在子组件内显示）
</div>
</template>
总结：父组件–子组件传值 ：
通过在子组件标签绑定自定义属性，属性值为父组件传递的数据，子组件对象通过props接收属性名，属性名指代的就是父组件的数据，然后展示在子组件标签内
2、子组件给父组件传值
扩展：原生JS中events的内置模块中的EventEmitter的类对象，其内有两个原型方法 on（接收事件推送来的数据） 和 emit（给事件推送相应的数据）形成了事件的推送
vue中把EventEmitter的类对象中的两个原型方法通过封装声明成emit
注意点：
当调用函数没有实参时，被调用函数有形参时，可以用 $event 当实参或者调用的函数名不加 ()
思路：
–> (1)给子元素的组件标签上绑定自定义事件
–> (2)子组件标签在父组件的template标签内，则在父组件中添加该事件的方法
–> (3)在子元素的方法中使用子元素的 $emit()方法 推送（参数1：推送给的对象事件名，参数2：推送的内容）
–> (4)在父组件添加的事件方法中：通过方法中的形参接收推送的内容（给父组件的data数据属性赋值上推送内容）
<body>
<div id="out"> <v-par></v-par> </div>
<template id="par">
<div>
<p>{{ tt }}</p>
<v-chi @topar="ss"></v-chi>
</div>
</template>
<template id="chi">
<div>
<p>{{ title }}</p>
<button @click="send()">发送数据</button>
</div>
</template>
</body>
<script>
var app = new Vue({
el: "#out",
components: {
"v-par": {
template: "#par",
data() {
return { tt: "" };
},
methods: {
ss(msg) {
this.tt = msg;
}
},
components: {
"v-chi": {
template: "#chi",
data() {
return { title: "发给给父组件的数据" };
},
methods: {
send() {
this.$emit("topar", this.title);
}
}}} } } });
</script>
总结：
在子组件标签上绑定自定义事件，内部通过$emit给该事件推送子组件数据，父组件内部通过函数参数接收
3、平行关系之间的传值
利用空vue对象，建立两平行组件之间的联系（保证on调用的对象是统一的）
利用 on（“”，function（）{ }）接收，进行数据事件推送
主要实现代码：
<template id="demoa">
<div> <p>{{ a }}</p> <button @click="asend()">发送给C</button> </div>
</template>
<template id="democ">
<div> <p>接收A数据：{{ astr }}</p> </div>
</template>
<script>
var vm = new Vue({}); # 保证$emit事件和$on事件调用的对象的指向是一样的
var app = new Vue({
el: "#out",
components: {
"v-a": {
methods: {
asend() {
vm.$emit("isa", this.a); }}}, # 给isa事件发送v-a组件上的数据
"v-c": {
data() {
return { astr: ""};
},
mounted() {
var _this = this; # 函数形参的this指向了vm,定义变量保存指向v-c组件的this
vm.$on("isa", function(msga) {
_this.astr = msga;}),
)}}}});
</script>
总结：利用空Vue对象，组件通过on接收数据