一.父子组件传值
要点1：父组件赋予子组件属性值，子组件通过props 来接收值。
要点2：父组件可以通过 子组件对象($ref)，来调用子组件的属性以及方法
要点3：子组件通过$emit 来调用父组件的方法
示例如下：
parent.vue
This is parent Component C的值是：{{para}}
import childComponent from"./child"; //引入一个组件
export default{
name:"parentComponent",
components: { childComponent },//定义父子关系
data() {return{
para:31};
},
mounted() {},
methods: {
testFunc(p) {
alert("这是父页面的方法" +p);
}
}
};
View Code
child.vue
This is child component
a:{{ReceiveA}} ,b:{{ReceiveB}} ,c:{{ReceiveC}}
exportdefault{
name:'child',
props:["a","b"],//接收父页面传递的属性值
data() {return{
val:-1,
ReceiveA:this.a,
ReceiveB:this.b,
ReceiveC:this.c
}
},
methods:{
updateValue(){//update:属性名 ,可以更改父页面对应绑定的data 变量的值
this.$emit("update:c",this.val);
},
test(){//tt 为父页面绑定的事件名，方法的实体为testFunc
this.$emit("tt",this.val);
}
}
}
View Code
关键字解释：
1.$ref :在任意元素标记中 加入 ref="xxxx" 在对应vue 代码中可以通过 this.$refs.xxxx 来调用到这个对象
2. props :接收属性 ，也可以定义为 props: {{a:String},....}
3.$emit: 调用父组件属性方法
4.sync:子组件改变父组件的值
二. 多层组件之间的嵌套传值
应用场景，A组件中有子组件B ，B组件中有组件C ，C调用A传递的属性或方法
通过VUEX 可以解决，但此处不作考虑。此处使用 $listener 和 $attrs 来 解决 跨组件传递的问题。
示例：
parent.vue
This is parent Component
import childComponent from"./child1"; //引入一个组件
export default{
name:"parentComponent",
components: { childComponent },//定义父子关系
data() {return{
para:31};
},
mounted() {},
methods: {
testFunc(p) {
alert("这是父页面的方法" +p);
}
}
};
View Code
chlid1.vue
This is child component1
parent para:{{a}}
import childComponent2 from"./child2"; //引入一个组件
export default{
name:'child1',
props:["a"],//接收父页面传递的属性值
components: { childComponent2 }, //定义父子关系
data() {return{
ReceiveA:this.a,
}
},
methods:{
updateValue(){//update:属性名 ,可以更改父页面对应绑定的data 变量的值
this.$emit("update:c",this.val);
},
test(){//tt 为父页面绑定的事件名，方法的实体为testFunc
this.$emit("tt",this.val);
}
}
}
View Code
chlid2.vue
This is child component2
parent para: {{b}}
exportdefault{
name:'child2',
props:["b"],//接收父页面传递的属性值
data() {return{
}
},
methods:{
}
}
View Code
结果图：
