vue 父组件与子组件相互通信

vue 父组件与子组件相互通信

一、父组件给子组件传值
props 实现父组件向子组件传值。
1父组件里：
//标签名为子组件.vue文件名称
<numberrule v-if=“numberRuleVisible” :rule-name=“dataForm.ruleName” ref=“numberrule”>
msg是绑定的自定义属性，类似我们原生html 给标签自定义属性一样，Widget是传输变量
<script >
import childpack from ‘./childPack.vue’ //引用子组件
export default{
name: ‘FatherPack’,
components: { childpack },
data(){
return（）{
myMsg：‘我是父组件参数’
}
},
mothods:{
}

}
</script>

2子组件里：
<div>
<span>{{msg}}
</div>
export default {
name: ‘ChildPack’,
props:[“msg”]
//也可以指定默认类型和默认值
// props: {
// msg: {
// type: Number,
// default: 0
// }
// },

// isPublic: {
// type: Boolean,
// default: undefined //注意！对于布尔类型，默认值不要写成false，否则isPublic永远为false。
// }

data(){
},
created() {
console.log（‘child_msg’,this.msg）
},
mothods:{
},

}

二、子组件传值到父组件
this.$emit() 实现子组件向父组件传值。

1在子组件里:
export default{
methods: {
changeFather(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 50: …数"); }̲, //可以传…emit(“listenTochildEvent”,pms);
// },
} }

2在父组件：定义事件listenTochildEvent，并实现showMessageFromChild方法，接收父组件传递来的参数。

<script >
import childpack from ‘./childPack.vue’ //引用子组件
export default{
name: ‘FatherPack’,
components: { childpack },
data(){
return（）{
myMsg：‘我是父组件参数’
}
},
mothods:{
showMessageFromChild(data){
console.log(data);
}

}
</script>

三、将一、二 一起使用就是可以实现父子组件互相传值。