Vue 父子组件通信入门

• 父组件向子组件传值

　　　　1.组件实例定义方式，注意：子组件一定要使用props属性来定义父组件传递过来的数据

<script type="text/javascript">
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是父组件中的消息'
      },
      components: {
        son: {
          template: '<h1>这是子组件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>

　　

　　　　2.使用v-bind或简化指令，将数据传递到子组件中

<div id="app">
    <son :finfo="msg"></son>
</div>

　　

• 子组件向父组件传值

　　　原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；

　　　子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用；

　<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>
  </div>

  <script type="text/javascript">
    // 子组件的定义方式
    Vue.component('son', {
      template:`

   　　　　<div>
        　　<input type="button" value="向父组件传值" @click="sendMsg" />
      　　</div>

　　　　`, // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>

　　

• 子组件中 data 和 props 的区别

　　　　子组件中的data数据，不是通过父组件传递的是子组件私有的，是可读可写的；

　　　　子组件中的所有 props中的数据，都是通过父组件传递给子组件的，是只读的；

• 关于Vue 属性 watch，computed和methods之间的对比

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算；主要当作属性来使用；

2. methods方法表示一个具体的操作，主要书写业务逻辑；

3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；