vue组件之间的数据传递（子传父、父传子、组件之间的传递）

1. 父向子传值：v-bind 属性绑定

      // 根组件
      var vm = new Vue({
          el: '#app',
          data: {
              pmsg: '父组件中内容',
              _title: "动态绑定属性内容"
          },
      })
      // 1. 组件内部通过props接收传递过来的值
      Vue.component('menu - item ', {
         props: ['title'], // 在props中使用驼峰形式，html模板中需要使用短横线的形式(因为dom元素的属性不区分大小写.和组件名字类似。字符串形式的模板中没有这个限制)
         template: '<div>{{ title }}</div>'
      })
       // 2. 父组件通过属性将值传递给子组件
       <menu-item title="来自父组件的数据"></menu-item>
       <menu-item :title="_title"></menu-item>

2. 子向父传值：v-on 事件绑定

// 根组件
// ...
// methods: {
//    event() {
//      this.color = red
//    }
// }
// ...
// 1.子组件通过自定义事件向父组件传递信息
    <button @click='$emit("changeColor") '>扩大字体</button>
// 2.父组件监听子组件的事件
    <menu-item @changeColor='event'></menu-item>

3. 兄弟之间共享数据：EventBus

$on 接收数据的那个组件
$emit 发送数据的那个组件

// 根组件
var vm = new Vue({
   el: '#app',
   data: {
       pmsg: '父组件中内容'
   },
   methods: {
       handle: function() {
           // 销毁事件
           hub.$off('event1');
           hub.$off('event2')
       }
   }
})
// 提供事件中心
var hub = new Vue();
// 子组件1
Vue.component('childComponent1', {
    data() {
        return {
            num: 0
        }
    },
    // html挂载完成后执行。执行顺序：子组件——>父组件
    mounted: function() {
        // 监听事件1
        hub.$on('event1', (val) => {
            this.num += val
        })
    },
    methods: {
        increase() {
            // 触发事件2
            hub.$emit('event2', 1)
        }
    },
    template: `
        <div>
            <button @click="increase"></button>
        </div>
    `
})
// 子组件2
Vue.component('childComponent2', {
    data() {
        return {
            num: 0
        }
    },
    // html挂载完成后执行。执行顺序：子组件——>父组件
    mounted: function() {
        // 监听事件2
        hub.$on('event2', (val) => {
            this.num += val
        })
    },
    methods: {
        decrease() {
            // 触发事件1
            hub.$emit('event1', 1)
        }
    },
    template: `
        <div>
            <button @click="decrease"></button>
        </div>
    `
})
// 1. 单独的事件中心管理组件间的通信
var eventHub = new Vue()
// 2. 监听事件与销毁事件
eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')
// 3. 触发事件
eventHub.$emit(‘add-todo', id)