方法一：这个方法不用在父组件那里写自定义事件，对于处理一些小数据简单易用
<body>
<div id="app">
<child :mag.sync='msg'></child>
msg:{{msg}}
</div>
</body>
<script>
Vue.component('child',{
template:`
<div>
<button @click="open">点击我</button>
</div>
`,
prop:['msg'],
data:function(){
return{
mag:this.msg
}
},
methods:{
open(){
console.log(this.mag);
this.$emit('update:mag',true);
}
}
})
new Vue({
el:'#app',
data:{
msg:'hello world',
},
methods:{
toshow(msg){
this.msg=msg;
}
}
})
</script>
方法二：通过自定义事件
<body>
<div id="app">
<child2 :msg='msg' @showbox="toshow"></child2>
msg:{{msg}}
</div>
</body>
<script>
Vue.component('child2',{
template:`
<div>
<button @click="open">点击我2</button>
</div>
`,
prop:['msg'],
data:function(){
return{
msg:this.msg
}
},
methods:{
open(){
console.log(this.msg);
this.$emit('showbox',true);
}
}
})
new Vue({
el:'#app',
data:{
msg:'hello world',
},
methods:{
toshow(msg){
this.msg=msg;
}
}
})
</script>
---------------------
【转载，仅作分享，侵删】
作者：努力_才幸福
原文：https://blog.csdn.net/weixin_38098192/article/details/81113804
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
