Vue父子组件通讯传值
2019-03-31 本文已影响5人
进击的切图仔
Vue父子组件通讯传值
父组件往子组件传值
<body>
<div id="App">
<!--可以采用v-bind动态传值-->
<child :txt="msg"></child>
<!--静态值(常量)-->
<child txt="txt的属性值"></child>
<!--采用默认值 前提是有设置-->
<child></child>
</div>
<script>
// 全局组件
Vue.component("child",{
template: "<p>{{txt}}</p>",
props: {
txt: {
default: "组件自带的默认值"
}
}
})
//props => Object || Array
//组件传值
let app = new Vue({
el: "#App",
data: {
msg: "组件传值"
}
})
</script>
</body>
子组件与父组件通信
方式1 采用中间件作为通讯中转站实现子组件往父级组件通讯传值的功能
<body>
<div id="App">
<em>电话次数: {{num}} </em>
<!--可以采用v-bind动态传值-->
<child :txt="msg"></child>
<!--静态值-->
<child txt="txt的属性值"></child>
<!--采用默认值 前提是有设置-->
<child></child>
</div>
<script>
let connectCar = new Vue();
// 全局组件
Vue.component("child",{
template: "<p @click='callParent'>{{txt}}</p>",
props: {
txt: {
default: "组件自带的默认值"
}
},
methods: {
callParent(){
connectCar.$emit("call","Child发来信息了");
}
}
})
//组件传值
let app = new Vue({
el: "#App",
data: {
msg: "组件传值",
num: 0
},
methods:{
callChild(){
connectCar.$on("call",msg => {
console.log(msg);
this.num ++;
})
}
}
})
// 建立通信连接
app.callChild();
</script>
</body>
利用自定义事件实现子组件与父组件通讯
<body>
<div id="App">
<em>电话次数: {{num}} </em>
<!--可以采用v-bind动态传值-->
<child :txt="msg" @call="callChild"></child>
<!--静态值-->
<child txt="txt的属性值" @call="callChild"></child>
<!--采用默认值 前提是有设置-->
<child @call="callChild"></child>
</div>
<script>
let connectCar = new Vue();
// 全局组件
Vue.component("child",{
template: "<p @click='callParent'>{{txt}}</p>",
props: {
txt: {
default: "组件自带的默认值"
}
},
methods: {
callParent(){
this.$emit("call","Child发来信息了");
}
}
})
//组件传值
let app = new Vue({
el: "#App",
data: {
msg: "组件传值",
num: 0
},
methods:{
callChild(msg){
console.log(msg);
this.num ++;
}
}
})
</script>
</body>
