Vue中的组件通信(六种方法详解)

一、关于组件通信

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

组件可以有以下几种关系：父子关系， 兄弟关系，隔代关系（可能隔多代）。

本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、ref/$parent / $children、$attrs/$listeners和provide/inject。

图示如下：

二、组件通信的方式：

方法一、props/$emit

父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中$emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值(子：props，父：v-bind)

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
    
  name: 'App',
  data(){
    
    return{
    
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    
    "users":Users
  }
}
</script>

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{
  {user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
    
  name: 'HelloWorld',
  props:{
    
    users:{
               //这个就是父组件中子标签自定义名字
      type:Array,
      required:true,  // 如果为true则代表必须传值
      default: [], // 没有传值则使用默认值，和required二选一
    }
  }
}
</script>

可以把props写成一个对象。没有通过则提前报错。

总结：父组件通过props向下传递数据给子组件。
注：组件中的数据共有三种形式：data、props、computed

2.子组件向父组件传值（子：this.$emit，父：v-on）

当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{
  {title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
    
  name: 'app-header',
  data() {
    
    return {
    
      title:"Vue.js Demo"
    }
  },
  methods:{
    
    changeTitle() {
    
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>