阅读 50

Vue学习小札——2.4 父子组件间的数据传递

父组件向子组件传递数据——父组件通过属性的形式向子组件传递数据

子组件通过props形式接受父组件传来的数据。

<body>
  <div id="app">
    <counter :count="0"></counter>
    <counter :count="1"></counter>
  </div>
   
  <script>
   var counter = {
    props: ['count'],
    template: '<div>{{count}}</div>',
   };
   var vm = new Vue({
     el: "#app",
     components: {
       counter:counter
     }
   });
  </script>
</body>
复制代码

父组件通过属性的形式向counter子组件传递了一个叫count的数据,子组件通过props接受count这个属性的内容。这样在子组件的模板里面就可以直接来使用count。


(单向数据流:父组件可以向子组件传递任何数据,子组件不能改变父组件的数据)父组件可以随意向子组件传递参数,子组件绝对不能随便修改子组件传递过来的参数。举例来说,如果父组件自身有个数据是3,过一会变成4传给子组件,这是没有任何问题的。但是,传给了子组件之后,子组件接受了父组件传递过来的内容,子组件只能够使用这个内容,不能够去修改这个内容。之所以Vue中有这个单向数据流的概念,原因在于,一旦你的count接受的不是基础类型的数据,而是类似于object这样的引用形式的时候,你在子组件里改变了传递过来的数据内容,有可能接受的子组件数据还被其他子组件使用,这样的话,你这个子组件改变了数据,还可能对其他子组件造成影响。

<body>
  <div id="app">
    <counter ref="one" @change="handleChange" :count="3"></counter>
    <counter ref="two" @change="handleChange" :count="2"></counter>
    <div>{{total}}</div>
  </div>
   
  <script>
   var counter = {
    props: ['count'],
    data: function() {
        return {
          number :this.count
        }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    methods: {
       handleClick: function() {
        this.number++;
        this.$emit('change',1);
       }
    }
   };
   var vm = new Vue({
     el: "#app",
     components: {
       counter:counter
     },
     data: {
      total: 5,
     },
     methods:  {
       handleChange: function() {
           this.total = this.$refs.one.number + this.$refs.two.number;
       }
     } 
   });
  </script>
</body>
复制代码

子组件通过事件触发的形式向父组件传值。emit()


文章分类
阅读
文章标签