vue 父子组件传递数据

单向数据流：

 数据从父级组件传递给子组件，只能单向绑定。

子组件内部不能直接修改从父级传递过来的数据。

解决方法： 可以使用data将父组件传递过来的数据拷贝一份存放起来，再修改拷贝的数据就可以了　

//用data来解决不能修改父组件传递的数据的问题，
                 // 我们新增一个number保存父组件传递过来的数据，这样就可以修改数据的值了
                  data:function(){
                        return {
                             number: this.count
                        }
                  },

　　数据就可以修改了：

 methods:{
                      handleclick:function() {
                          this.number=this.number+2;
                          this.$emit('change',2);//子组件向父组将传递参数，触发change事件
                      }
                  }

　　我们使用$emit触发chang方法，在父组件的模版中监听chang方法，最后在Vue实例中调用

（１）

 this.$emit('change',2);//子组件向父组将传递参数，触发change事件

　　（２）

    <counter  :count="1" @change="handleIncreae"></counter>

　　

　（３）

  var vm=new Vue({
               el:'#shuju',
               data:{
                  total:3
               },
               components:{
                   counter:counter
               },
               methods:{
                   handleIncreae:function(step)  {
                       this.total+=step;
                   }

               }
           })

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
     <div id="shuju" >
            <counter  :count="2" @change="handleIncreae"></counter>
            <counter  :count="1" @change="handleIncreae"></counter>
            <div>{{total}}</div>
     </div>
     <script>
           var  counter={
                  props:['count'],
                 //用data来解决不能修改父组件传递的数据的问题，
                 // 我们新增一个number保存父组件传递过来的数据，这样就可以修改数据的值了
                  data:function(){
                        return {
                             number: this.count
                        }
                  },
                  template:'<div @click="handleclick">{{number}}</div>',
                  methods:{
                      handleclick:function() {
                          this.number=this.number+2;
                          this.$emit('change',2);//子组件向父组将传递参数，触发change事件
                      }
                  }
           };
           var vm=new Vue({
               el:'#shuju',
               data:{
                  total:3
               },
               components:{
                   counter:counter
               },
               methods:{
                   handleIncreae:function(step)  {
                       this.total+=step;
                   }

               }
           })
     </script>
</body>
</html>

　　效果：

 

 2018-05-15　　　21:47:17

posted @ 2018-05-15 21:48  1点  阅读(227)  评论(0)  编辑  收藏  举报