黑马程序员技术交流社区

标题: 【上海校区】vue中子组件改变父组件数据的两种方法 [打印本页]

作者: 不二晨 时间: 2019-4-15 10:15
标题: 【上海校区】vue中子组件改变父组件数据的两种方法
方法一：这个方法不用在父组件那里写自定义事件，对于处理一些小数据简单易用

<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
版权声明：本文为博主原创文章，转载请附上博文链接！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2