父子组件传值 (Parent/Child)
1、 props/$emit
(1)父传子,props
在父组件中引用的子组件上绑定
<m-child :msg="'from Parent msg'"></m-child>
在子组件中用props接收
props: {
msg: {
type: String,
default: ""
}
},
(2)子传父,$emit
在子组件中一般用事件触发,$emit中是传给父组件的自定义事件名和内容
<button @click="walk">走妳</button>
methods: {
walk() {
this.$emit('showMsg','from child')
}
}
在父组件中引用的子组件上,通过监听子组件的自定义事件,获取传过来的内容,在data里定义展示传过来内容的变量,并写一个方法接收这个传过来的值
<m-child :msg="'from Parent msg'" @showMsg="show"></m-child>
data() {
return {
msgOne: ""
};
},
methods: {
show(val) {
this.msgOne = val;
}
}
2、$parent/$children
在父组件中可以用this.$children接收子组件传过来的data里的变量值,或者定义的方法
在子组件中可以用this,$parent接收父组件传过来的data里的变量值,或者定义的方法
mounted() {
console.log(this.$parent);
}
3、ref
本质上与$parent/$children是一样的,但是使用的操作有所不同,在组件上绑定ref,接收的时候需要this.$refs
<m-child :msg="'from Parent msg'" @showMsg="show" ref="child"></m-child>
mounted () { console.log(this.$children[0].child); console.log('ref',this.$refs.child); }