Vue组件之间通信

一、父子组件之间的传值：

1、父子组件之间的传值：

1.1、父组件向子组件传值：子组件通过props属性获取父组件中的值

（1）、在父组件中使用子组件时，需要通过v-bind指令绑定一个属性

（2）、在子组件中通过props属性,来获取父组件中v-bind指令绑定的那个属性

举例：
Son.vue代码段

<template>
<ul>
  <li v-for="(user,index) in users" v-bind:key="index">
    {{ user }}
  </li>
</ul>
</template>

<script>
export default {
  name: "Son",
  props:{
    users:{
      type:Array,
      required:true
    }
}
}
</script>

<style scoped>
li{
  list-style-type: none;
}
</style>

Father.vue代码段

<template>
<Son v-bind:users="arr"/>
</template>

<script>
import Son from "./Son.vue"
export default {

  name: "Father",
  setup(){
    const arr = ['大雁塔','小雁塔','兵马俑','大唐芙蓉园','乾陵']
    return{
      arr
    }
  },
  components:{
    Son
  }
}
</script>

<style scoped>

</style>

App.vue

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Father from "./components/Father.vue";

</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
<Father/>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

1.2、子组件向父组件传值：通过触发事件的方式传递(使用$emit触发自定义的事件)

举例：

SonOne.vue代码段：

<template>
<h2 @click="changeTitle">{{ title }}</h2>
</template>

<script>
import {ref,getCurrentInstance} from "vue";
export default {
  name: "SonOne",
  setup(){
     let title = ref('我是子组件，单机我，传值给父组件')
    const{ proxy } = getCurrentInstance()
    function changeTitle(){
       proxy.$emit('updateTitle','西安')
    }
    return{
       title,
      changeTitle
    }
  }
}

</script>

<style scoped>

</style>

FatherOne.vue代码段：

<template>
<SonOne v-on:updateTitle="modifyTitle"/>
  <h1>{{title}}</h1>
</template>

<script>
import { ref } from 'vue';
import SonOne from "./SonOne.vue";
export default {
  name: "FatherOne",
  components: {SonOne},
  setup(){
    let title = ref('我是父组件，用来接收子组件的值')
    function modifyTitle(info){
      title.value=info
    }
    return{
      title,
      modifyTitle
    }
  }
}

</script>

<style scoped>

</style>

App.vue：

import FatherOne from "./components/FatherOne.vue";
 <FatherOne/>

单击前：

单击后：

1.3、在组合式API(setup)中使用this

（1）、this：代表当前的组件

（2）、在Vue3的setup中没有this，但是有proxy，作用与this的作用相同，获取proxy的方法：

第一步：从vue中导入方法：getCurrentInstance
import { getCurrentInstance } from ‘vue’;
第二步：从getCurrentInstance方法中获取proxy
const { proxy } = getCurrentInstance()；

（3）、强调：

A、setup中没有this，可以使用proxy,其作用与this相同

B、在setup中定义普通变量,建议使用ref进行初始化。改变用ref初始化的变量的值,采用的方法，变量名.value = '新值'

C、在setup中定义普通对象,建议使用reactive进行初始化，const obj = reactive({})

二、跨级组件之间的通信

使用provide / inject方法,provide发送数据,inject接收数据

1、provide( name,value )

name：是属性名
value：属性值

2、inject(name,default)

name：是属性名。必须和provide的属性名相同
default：可选参数

演示：

Grandson.vue代码段：

<template>
  <h2>孙子：朱瞻基</h2>
  <div>爷爷：{{ getYeYeData }}</div>
</template>

<script>
import { inject } from 'vue';
export default {
  name: "Grandson",
  setup(){
    let getYeYeData = inject('giveLastWords')
    return{
      getYeYeData
    }
  }
}
</script>

<style scoped>

</style>

SonTwo.vue代码段：

<template>
<h2>儿子：朱高炽</h2>
  <div>父亲：{{getPapaData}}</div>
  <hr/>
  <Grandson/>
</template>

<script>
import {inject} from "vue";
import Grandson from "./Grandson.vue";

export default {
  name: "SonTwo",
  components:{
    Grandson
  },
  setup(){
    let getPapaData=inject('giveLastWords')
    return{
      getPapaData
    }
  }
}
</script>

<style scoped>

</style>

Grandpa.vue代码段：

<template>
<h2>朱棣：{{lastWords}}</h2>
  <hr/>
  <SonTwo/>
</template>

<script>
import {inject, provide} from "vue";
import SonTwo from "./SonTwo.vue";
export default {
  name: "GrandPa",
  components: {SonTwo},
  setup(){
    let lastWords='抗击元蒙，修订永乐大典'
    provide('giveLastWords',lastWords)
    return{
      lastWords
    }
  }
}
</script>

<style scoped>

</style>

App.vue代码段：

import Grandpa from "./components/Grandpa.vue";
  <Grandpa/>