vue组件通信(组件传值)总结

目录

vue组件间通信的几种方式：

一：props / $emit (父子)

A => B：父组件A通过props的方式向子组件B传递。

B => A：通过子组件中的$emit，A组件中v-on的方式实现。

1.父组件向子组件传值案例

2.子组件向父组件传值案例

二：$emit / $on (父子、兄弟、跨级)

1.原理

2.具体使用

3.兄弟组件传值案例

 三：provide / inject (跨级)

1.原理

2.跨级组件传值案例

3.provide与inject 实现数据响应式的两种方法

4.provide与inject 实现数据响应式案例

---

vue组件间通信的几种方式：

props、$emit / $on、provide/inject、vuex、$parent / $children、$attrs / $listeners

参考：Vue 组件间通信六种方式

一：props / $emit (父子)

A => B：父组件A通过props的方式向子组件B传递。

B => A：通过子组件中的$emit，A组件中v-on的方式实现。

1.父组件向子组件传值案例

App.vue父组件

总结：父组件通过props向下传递数据给子组件。

注：组件中的数据共有三种形式：data、props、computed

2.子组件向父组件传值案例

子组件

父组件

// 父组件

总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

二：$emit / $on (父子、兄弟、跨级)

1.原理

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

2.具体使用

    var Event=new Vue();
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});

3.兄弟组件传值案例

 三：provide / inject (跨级)

1.原理

祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

2.跨级组件传值案例

上级组件A.vue

// A.vue
export default {
  provide: {
    name: '浪里行舟'
  }
}

下级组件B.vue

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // 浪里行舟
  }
}

注意：

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档 所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。

3.provide与inject 实现数据响应式的两种方法

• provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props，methods
• 使用2.6最新API Vue.observable 优化响应式 provide(推荐)

4.provide与inject 实现数据响应式案例

孙组件D、E和F获取A组件传递过来的color值，并能实现数据响应式变化，即A组件的color变化后，组件D、E、F会跟着变

 A组件

// A 组件 

      
A 组件
      改变color
      
      

......
  data() {
    return {
      color: "blue"
    };
  },
  // provide() {
  //   return {
  //     theme: {
  //       color: this.color //这种方式绑定的数据并不是可响应的
  //     } // 即A组件的color变化后，组件D、E、F不会跟着变
  //   };
  // },
  provide() {
    return {
      theme: this//方法一：提供祖先组件的实例
    };
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.color = color;
      } else {
        this.color = this.color === "blue" ? "red" : "blue";
      }
    }
  }
  // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
  // provide() {
  //   this.theme = Vue.observable({
  //     color: "blue"
  //   });
  //   return {
  //     theme: this.theme
  //   };
  // },
  // methods: {
  //   changeColor(color) {
  //     if (color) {
  //       this.theme.color = color;
  //     } else {
  //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
  //     }
  //   }
  // }

F组件

// F 组件