组件通信详解

组件通信的常用方式

组件通信常用方式
props
eventbus
vuex
自定义事件

• List item

  边界情况
  $parent
  $children
  $root
  $refs
  provide/inject

• 非prop特性

  $attrs
  $listeners

父组件向子组件传值之props

子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法，方法如下：

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

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是父组件中的消息'
      },
      components: {
        son: {
          template: '<h1>这是子组件 --- {
  {finfo}}</h1>',
          props: ['finfo']// 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样才能使用这个数据
           //  props:{
		  //    title:String,
		  //    del:{
		  //      type:Boolean,   //也可以通过这种方式定义数据，并指定数据的类型
		  //      default:false
		  //    }
		  //  }  
        }
      }
    });
  </script>

2. 通过属性绑定（v-bind:） 的形式，将数据传递到子组件中：

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

注意：
data 上的数据，都是可读可写的；
props 中的数据，都是只读的，无法重新赋值；

注意：父向子传值，如果父的值是异步操作的结果，如果直接使用该值，则会使undifined，因为还未请求到该值，这种情况，子组件可以使用watch来监听该值变化后再赋值

子组件向父组件传值之$emit

1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
2. 父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

  <div id="app">
    <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
    <com1 v-bind:parentmsg="msg"></c