一、组件之间的关系：

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

（1）父组件向子组件传值：子组件通过props属性获取父组件中的值

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

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

☀️举个例子：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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-position: inside;
  }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

App.vue代码：

import Father from "./components/Father.vue"
<Father/>
1
2

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

☀️举个例子：
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

SonOne.vue代码段：

<template>
<h1 @click="changeTitle">{{ title }}h1>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

App.vue代码段：

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

（3）在组合式API(setup)中使用this所出现的问题（子传父）

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

B、在Vue3的setup中没有this，但是有proxy，作用与this的作用相同

获取proxy的方法

第一步：从vue中导入方法：getCurrentInstance

import { getCurrentInstance } from ‘vue’;

第二步：从getCurrentInstance方法中获取proxy

const { proxy } = getCurrentInstance()

C、强调：

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

②在setup中定义普通变量,建议使用ref进行初始化。改变用ref初始化的变量的值,采用的方法

变量名.value = ‘新值’

③在setup中定义普通对象,建议使用reactive进行初始化

const obj = reactive({})

2、兄弟组件之间的传值:

兄弟组件之间的传值：使用mitt第三方库

1、创建事件中心：创建事件触发器并导出

event.js代码段：

//创建事件中心
import mitt from 'mitt'; //导入mitt
const emitter = mitt() //创建事件触发器
export default emitter;//导出事件触发器
1
2
3
4

2、兄弟组件定义接收数据方法：对指定事件进行监听

3、兄弟组件定义发送数据方法：触发对方监听的事件并发送数据

Brother1.vue代码段：

<template>
   <div class = "Brother1">
     <h2>兄弟 --- 关羽h2>
     <p>{{ data1 }}    {{ data2 }}p>
     <button @click="sendData">将美酒送给三弟button>
   div>
template>

<script>
//导入事件中心的事件触发器
import emitter from '../event/event'

export default {
  name: "Brother1",
  data(){
    return{
      data1:'美酒',
      data2:''
    }
  },
  methods:{
    //接收数据的方法
    receive: function(){
      //通过事件触发器来监视“two-to-one"事件是否被触发，若被触发则接收触发该事件的组件传递的组件
      emitter.on('two-to-one',(data)=>{
        this.data2 = data
      })
    },
    sendData:function(){
      //触发指定事件，将数据传递给对应的事件
      emitter.emit('one-to-two',this.data)
    }
  },

  mounted(){//表示组件挂在完成，只要组件挂载完成mounted下的代码就立即执行
    this.receive();

  }
}
script>

<style scoped>
.Brother1{
  color: blueviolet;
  font-size: 20px;
  border: 1px solid #bbb;
  margin-bottom: 10px;
}

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Brother2.vue代码段：

<template>
  <div class = "Brother2">
    <h2>兄弟 --- 张飞h2>
    <p>{{ data1 }}    {{ data2 }}p>
    <button @click="sendData">将宝剑送给二哥button>
  div>
template>

<script>
//导入事件中心的事件触发器
import emitter from '../event/event'
export default {
  name: "Brother2",
  data(){
    return{
      data1:'宝剑',
      data2:''
    }
  },
  methods:{
  //  监听one-to-two事件，接收数据
    receive:function(){
      emitter.on('one-to-two',(data)=>{
        this.data2 =data
      })
    },
    sendData(){//发送数据，触发”two-to-one‘事件
      //触发指定事件，将数据传递给对应的事件
      emitter.emit('two-to-one',this.data)

    }
  },
  mounted(){//表示组件挂在完成，只要组件挂载完成mounted下的代码就立即执行
    this.receive();

  }
}
script>

<style scoped>
.Brother2{
  color: yellowgreen;
  font-size: 20px;
  border: 1px solid #ccc;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

App.vue代码段：

import Brother1 from "./components/Brother1.vue";
import Brother2 from "./components/Brother2.vue";
<Brother1/>
<Brother2/>
1
2
3
4

3、跨级组件之间的通信:

跨级组件之间的通信：使用provide / inject方法,provide发送数据,inject接收数据

1、provide( name,value )

name：是属性名
value：属性值

2、inject(name,default)

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

☀️举个例子：

KangXi.vue代码段：（爷爷）

<template>
<h2>康熙：{{ lastWords}}h2>
  <hr/>
  <YongZheng/>

template>

<script>
import { provide } from 'vue';
import YongZheng from './YongZheng.vue'
export default {
  name: "KangXi",
  components:{
    YongZheng
  },
  setup(){
    let lastWords = '整顿吏治'
    provide('giveLastWords',lastWords)

    return{
         lastWords
    }
  }
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

YongZheng.vue代码段：（儿子）

<template>
<h2>儿子：雍正h2>
  <div>父亲： {{ getFatherData }}div>
  <hr/>
  <QianLong/>
template>

<script>
import { inject } from 'vue';
import QianLong from "./QianLong.vue";
export default {
  name: "YongZheng",
  components: {
    QianLong
  },
  setup(){
    let getFatherData = inject('giveLastWords')
    return {
      getFatherData
    }
  }
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

QianLong.vue代码段：（孙子）

<template>
<div>
  <h2>孙子：乾隆h2>
  <div>爷爷：{{ getYeYeData }}div>
div>
template>

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

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

App.vue代码段：

import KangXi from "./components/KangXi.vue";
  <KangXi/>
1
2