Vue组件间传值

• 父组件传给子组件: 通过子组件的props属性传递;
• 子组件传递给父组件: 通过$emit()方法传递;
• 兄弟之间传值: ①prop属性和$emit共同使用；②事件车

1. 向子组件传递数据

(1)、介绍
通过组件属性props传递，当值传递给prop特性时，他就变成了组件实例的一个属性；

(2)、注意
组件中的prop中的值为驼峰命名(myCmp)时,在使用组件时需要将驼峰命名拆分为my-cmp;因为DOM对大小写不敏感

<my-cmp start-value='hah'></my-cmp>  // 传静态值
<my-cmp :start-value='zeroName'></my-cmp> // 传动态值变量
<my-cmp :start-value='0'></my-cmp> // 传数字时，需要使用v-bind:;为了指出这是js形式，数值
<my-cmp :start-value='false'></my-cmp> // 与传数字同理
props: [startValue]

(3)、传值

• 静态值传递

// js
Vue.component('component-name', {
    props: ['title'],
    template: '<p>{{title}}</p>'
});
// html
<component-name title='this is a component of identify'></component-name>

• 动态值传递

// js
Vue.component('component-name', {
    props: ['title'],
    template: '<p>{{title}}</p>'
});
// html
<component-name v-for='item in items'
				 v-bind:key='item.id' // 组件循环，必须有key值
                 v-bind:title='item.name'
></component-name>

2、兄弟之间传值

• 第一种: 通过子$emit()传递给父，父再通过props传递给子；
• 第二种: 通过事件车；创建一个vue实例，兄弟组件公用同一个事件机制我们可以创建一个单独的js文件eventVue.js,内容如下

imort Vue from 'Vue'
export default new Vue

父组件如下：

<template>
    <ComponentA />
    <ComponentB />
</template>

子组件ComponentA如下：

<template>
      <div>
           <button @click="aEvent">A按钮</button>
      </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
      name: 'ComponentA',
      data () {
        return { 'msg': "我是组件A" }
      },
      methods:{
         aEvent:function(){
             //$emit这个方法会触发一个事件
             eventVue.$emit("aEmit",this.msg);
         }
      }
}
</script>

子组件b如下：

<template>
     <div class="components-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'ComponentB',
   data () {
        return { 'btext':"我是B组件内容" }
   },
   created:function(){
       this.bEvent();
   },
   methods:{
       bEvent:function(){    
         //这里最好用箭头函数，不然this指向有问题
         eventVue.$on("aEmit",(message)=>{
            this.btext = message
         })
       }
    }
}
</script>

(4)、单项数据流
父组件的值可以传递给子组件，并且父组件值的改变会引起子组件值的改变；但是不能在子组件中改变传递过来的父组件的prop值，否则会报错；