<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<!--例1：父组件->子组件之间的通信-->
<div id="exm1">
<card :message="msg"></card>
</div>
<!--例2：子组件->父组件之间的通信-->
<div id="exm2">
<unit @connect="show"></unit>
</div>
</body>
<script>
Vue.component('card', {
props:['message'],
template:`
<p>父组件->子组件的通信:{{ message }}</p>
`
});
let vm1=new Vue({
el:"#exm1",
data:{
msg:"我是父组件的内容",
}
});
Vue.component('unit',{
template:`
<button @click="send">点击</button>
`,
data(){
return {msg:"我是子组件的内容"}
},
methods:{
send(){
this.$emit('connect',this.msg);
}
},
});
let vm2=new Vue({
el:'#exm2',
methods:{
show(msg){
console.log(msg);
}
}
});
</script>
</html>【vue.js】组件间的通信（父组件->子组件、子组件->父组件）
猜你喜欢
转载自blog.csdn.net/weixin_39068791/article/details/81392095
今日推荐
周排行