一细睡、組件之間的通信

父組件向子組件傳遞

1. props
2. this.$parents
   應(yīng)急方法（包括$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元素，如果是組件俗或，就是組件實(shí)例

非父子組件通信

通過eventBus

參考博客

官方的例子

var bus = new Vue()

// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)

// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
  // ...
})

二市怎、雙向綁定

.sync語法糖

官方說明

v-model

官當(dāng)說明

v-model實(shí)際上是v-bind和v-on的語法糖，當(dāng)使用v-model時辛慰，默認(rèn)為

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

因此区匠，v-model也可用用于父子組件，通過自定義v-model，修改相應(yīng)的值和方法

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>

點(diǎn)擊change按鈕驰弄，父子組件都變成了子組件的text

parent.png

child.png

當(dāng)然麻汰，也可以在父組件上加一個按鈕，改變這個data