VUE组件间的通信

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33678670/article/details/80744369

#1 父子组件之间的通信

在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

这里写图片描述

#1.1 父组件到子组件使用props传递数据

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”:
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
父组件中使用子组件并传值给子组件:
<child message="hello!"></child>

单向数据流

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态。 另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
注意:JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

#1.2 子组件到父组件使用自定义事件

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

     父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。然后再对应子组件方法执行处触发事件,两者缺一不可。
    
<!-- 父组件 -->
<div id="app">
  <!-- 子组件 -->
  <!-- 父组件直接用 v-on 来监听子组件触发的事件。 -->
  <!-- 需跟子组件中的$emit组合使用 -->
  <mycon v-on:son_method="father_method"></mycon>
</div>
// 子组件
Vue.component('mycon', {
  template: '<button v-on:click="son_method">子按钮</button>',
  methods: {
    // 按钮点击时候触发事件
    son_method: function () {
      this.counter += 1;
      console.log("son");
      // 这句话来触发事件
      // 必须跟模板中的v-on配合使用
      this.$emit('son_method');
    }
  },
});

// 父组件
new Vue({
  el: "#app",
  methods: {
    father_method: function () {
      console.log("father");
    }
  }
});

#2 非父子组件之间的通信 Event Bus

在简单的场景下,使用一个空的 Vue 实例作为中央事件总线:
var bus = new Vue()

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

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

在更多复杂的情况下,你应该考虑使用专门的 状态管理模式(vuex).

阅读更多
换一批

没有更多推荐了,返回首页