Vue组件通信、双向绑定

一、组件之间的通信

父组件向子组件传递

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

子组件向父组件传递

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

  
{{ msg }}
  

Vue.component('button-message', {
  template: `

    
    Send
  
`,
  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时，默认为

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

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

等价于

传递对象

父组件

子组件

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

parent.png

child.png

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