vue 子传父/父传子 续更
2019-08-26 本文已影响0人
无枉少年
首先开门见山:
父传子
在父组件中引入子组件,然后在父组件中v-bind{函数名,要传的数值}
在子组件中需要一个接收器,props:{ 父组件的函数名}
具体操作:
父组件
import menuNav from "@/components/menuNav"; //引入子组件
data() {
return {
titleName:"" //需要绑定的值
};
},
components: {
menuNav //注册组件
},
<menuNav :titleName="titleName"></menuNav> //使用组件
子组件
props:["titleName"] //接收父组件传给子组件的值
<span class="f-36-p-fff">{{titleName}}</span>//绑定值
子传父
在父组件中引入子组件,然后绑定一个事件监听子组件传的值:v-on:{跟子组件传的函数名一致}="父组件函数名"
在子组件中使用this.$emit("跟父组件接收的函数名一致","要传的数值");
具体操作:
父组件
import contents from "./components/contents"; //引入子组件
data() {
return {
titleName:"" //data中需要接收的值,可写可不写
};
},
components: {
contents //注册组件
},
methods:{
son:function(data){
console.log(data);
this.titleName=data; //接收的值赋给data中,或者直接使用 {{data}}
}
}
<contents v-on:ListenerSon="son"></contents> //使用子组件
子组件
mounted(){
this.$emit("ListenerSon","绑定设备"); //传送的数值
}