【vue】父子、任意、祖孙三种组件间传值

组件传值三种：父子之间、任意组件之间（包含兄弟组件）、祖孙之间。

1、父–>子：通过属性传值，父组件将数据绑定到属性上，子组件通过v-bind+props（可以为数组/对象，一般用对象，与data属性并列，功能相似）获取数据；

父组件传递：
  <div id="app">
    <cpn :c-info='info'></cpn>//不支持驼峰命名，需要转换
  </div>
  子组件接收：
   const cpn = {
     template:'#aaa',
     // props: ['cInfo']，数组格式也可以
     props: {
       cInfo:{
         type:Object,
         default(){
           return {}
         }
       },//传值为对象类型时，默认接收用函数类型；
       aa:{
         type:String,
         default:''
       }
     }
   }

2、子–>父：通过v-on+$emit发送事件加参数传值，父组件监听事件触发自身事件；

  <div id="app">
    <cpn @cinfo="Finfo"></cpn>//这里可以省略参数，默认接收参数，与元素机制不太一样，元素上是事件不写（），默认传event对象
  </div>
  <template id="aaa">
    <div>
      <button v-for="item in infoList" @click="cinfo(item)">{{item}}</button>//这里就是元素事件的参数机制，必须写出来
    </div>
  </template>

子组件：
      methods: {
        cinfo(item){
          this.$emit('cinfo',item)
        }
      }
父组件：
    methods:{
        Finfo(item){
          console.log(item); 
        }
      }

3、兄弟组件间传值（也叫任意组件传值）

借助事件总线（全局变量），即定义vue全局对象msg（一般都是在.js文件中定义，兄弟组件使用时都要引入这个文件，import、export），通过一方发布msg.$emit(‘事件名’,‘参数’)、另一方接受msg.$on(‘事件名’,function(参数){})，实现传值。

• 定义事件总线：空vue实例就是中央事件总线；

var bus= new Vue();//方式一，同一文件中单独用
Vue.prototype.$bus = new Vue()//方式二，全局用

4、祖孙组件之间

• provide（提供）：Object | () => Object
• inject（注射）：Array | { [key: string]: string | Symbol | Object }

provide、inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}