vue 中的通信

vue 中的通信

详情描述

父子组件通信：

1. 子组件触发父组件函数：

子组件：
<template>
    <button @click="submit">提交</button>
</template>
<script>
export default {
  props: {
    onsubmit: {
      type: Function,
      default: null
    }
  },
  methods: {
    submit: function () {
      if (this.onsubmit) {
        this.onsubmit(‘cc12345’)
      }
    }
  }
}
</script>
父组件：
<template>
    <editor id="editor" class="editor" :onsubmit="cc"></editor>
</template>
<script>
export default {
  methods: {
    cc: function (str) {
      alert(str)
    }
  }
}
</script>

1. 子组件修改父组件传过来的值:this.$emit(‘update:foo’, newValue);父组件通过v-bind绑定并且写上.aync；
2. 由于javascript的特性，父组件像子组件传一个对象，子组件修改也会出发父组件变化；

非父子组件通信

1. 用一个新的 vue 实列管理

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
         // ...
})

1. 用vuex状态管理