前言：组件间的通信，总是词不达意，过眼就忘，因此利用休息时间做了如下总结
举例：祖-父-子分别为：App.vue——>Content.vue——>Hello.vue

@[toc]

传值

1、父传子

父组件：<Header :msg="msg"></Header>
子组件：props:[;msg] 或 props:{ mag:string }

• 通过props传
• 父组件通过props向下传递数据给子组件。

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

//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:String,//类型
      default:"你好",//设置默认值
      required:true//设置为必传值
    },
    list:{
   
   //对象或数组的默认值必须从一个工厂函数返回
        type:Array,
        default(){
   
   
            return []
        }
    }
  }
}
</script>

2、子传父

子组件：this.$emit("自定义事件名称"，要传的数据)
父组件：

<Header @click="getVal"></Header>
methods:{
    
    
   getVale(msg){
    
    
   // msg 就是子组件传递的数据
   }
}

• 通过自定义事件传值，通过$emit来触发事件
  

3、兄弟组件传值

父子组件的访问方式

1、父组件访问子组件中的数据

通过$refs拿值

2、子组件访问父组件中的数据

通过$parent拿值，但尽量少用，因为组件的复用性高，parent可能一直在变化
通过$root拿到根组件的值

跨级通信

祖父组件通过provide提供值，子组件通过inject拿取到值