Vue组件通信、双向绑定

一、组件之间的通信

父组件向子组件传递

1. props
2. this.$parents
   应急方法（包括$children）

子组件向父组件传递

1. $emit和$on
   自定义事件

<div id="message-event-example" class="demo">
  <p v-for="msg in messages">{{ msg }}</p>
  <button-message v-on:message="handleMessage"></button-message>
</div>

Vue.component('button-message', {
  template: `<div>
    <input type="text" v-model="message" />
    <button v-on:click="handleSendMessage">Send</button>
  </div>`,
  data: function () {
    return {
      message: 'test message'
    }
  },
  methods: {
    handleSendMessage: function () {
      this.$emit('message', { message: this.message })
    }
  }
})

new Vue({
  el: '#message-event-example',
  data: {
    messages: []
  },
  methods: {
    handleMessage: function (payload) {
      this.messages.push(payload.message)
    }
  }
})

2. ref
   ref在普通DOM上使用，引用指向的就是DOM元素，如果是组件，就是组件实例

非父子组件通信

通过eventBus

参考博客

官方的例子

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

二、双向绑定

.sync语法糖

官方说明

v-model

官当说明

v-model实际上是v-bind和v-on的语法糖，当使用v-model时，默认为

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

因此，v-model也可用用于父子组件，通过自定义v-model，修改相应的值和方法

model: {
    prop: 'checked',
    event: 'change'
  },

<my-checkbox v-model="foo" value="some value"></my-checkbox>

等价于

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

传递对象

父组件

<template>
  <div class="hello">
    <h1>{{ data.text }}</h1>
    <child :obj="data"></child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  name: 'HelloWorld',
  components: {
    Child
  },
  data () {
    return {
      data: {
        text: 'this is parent'
      },
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

子组件

<template>
  <div class="child">
    {{ obj.text }}
    <button @click="add">change</button>
  </div>
</template>

<script>
export default {
  props: {
    obj: Object
  },
  methods: {
    add () {
      this.obj.text = 'this is child'
    }
  }
}
</script>

点击change按钮，父子组件都变成了子组件的text

parent.png
child.png

当然，也可以在父组件上加一个按钮，改变这个data