vue中组件之间的通信

1、父传子—>prop

通过prop（可以在组件上注册一些自定义的属性）向子组件传递数据；

1. 父组件在子组件标签上通过自定义属性传递数据；
2. 子组件通过props接收父组件传过来的参数

props接收数据的两种方式：
1、数组
props:["xxxx","xxxx"]

2、对象
props:{
xxx:{type:数据类型,default:默认值（父组件）}
}
1
2
3
4
5
6
7
8

3. 在子组件中将传递过来的数据展示到页面上

父组件

<template>
  <div class="TongXingFuZuJian">
    <!--    1、通过在组件上自定义属性传递数据-->
    <TongXinZi :parentMessage="message" :age="age"/>
  </div>
</template>

<script>
import TongXinZi from "@/components/TongXinZi";

export default {
  name: "TongXingFuZuJian",
  components: {TongXinZi},
  data() {
    return {
      message: "我是父组件传过来的数据",
      age:5
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件

不能直接对传递过来的数据进行修改，如果需要修改，子组件需要一个data去接收传递过来的数据，然后修改data

<template>
  <div class="TongXinZi">
    <p>{{ parentMessage }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  name: "TongXinZi",
  //2、子组件通过props接收数据--字符串数组
  //props接收数据有两种方式：数组，对象
  // props:['parentMessage',"age"],
  //对象：需要对传过来的数据进行数据类型验证
  props: {
    parentMessage: {type: String,//类型验证
       default: "默认值"},
    age: {type: Number, default: 18},
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、子传父---->$emit

通过自定义事件向父组件传递数据；

自定义事件的流程：

1. 在子组件中通过$emit来触发事件，传递数据，$emit需要两个参数（自定义事件的名称、传递的数据）
2. 在父组件中通过v-on监听子组件中自定义的事件

子组件

<template>
  <div class="TongXinZi">
    <button @click="sendToParent">点击给父组件传递数据</button>
  </div>
</template>

<script>
export default {
  name: "TongXinZi",
  data() {
    return {
      num:18
    }
  },

  methods: {
    sendToParent(){
      //参数：1、自定义事件名称；2、传递的数据
      this.$emit("getChildMsg",this.num)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

父组件

不能直接对传递过来的数据进行修改，如果需要修改，父组件需要一个data去接收传递过来的数据，然后修改data

<template>
  <div class="TongXingFuZuJian">
    <TongXinZi @getChildMsg="getChildMsg"/>
  </div>
</template>

<script>
import TongXinZi from "@/components/TongXinZi";

export default {
  name: "TongXingFuZuJian",
  components: {TongXinZi},
  methods: {
    getChildMsg(value){
      //value就是子组件传过来的数据
      console.log(value);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3、父子组件通信，跨级通信---->provide / inject

• provider：提供，是一个对象，或者返回对象的函数
• inject：注入，可以是一个字符串数组，也可以是一个对象，在需要使用的地方注入即可
• 注意：provide，inject不是响应式的，即在祖先组件中修改了传递的值，后代组件中是不会改变的

//提供者
provide(){
	return {
		属性名：属性值,
	}
}

//注入：
inject:["属性名","属性名","属性名",xxxxx]
1
2
3
4
5
6
7
8
9

祖先组件： 提供者

<template>
  <div class="TongXingFuZuJian">
    <button @click="changeMsg1">改变message1的数据</button>
    <p>{{ message1 }}</p>
  </div>
</template>

<script>
import TongXinZi from "@/components/TongXinZi";

export default {
  name: "TongXingFuZuJian",
  components: {TongXinZi},
  data() {
    return {
      message1: "这是我传给后代组件的值",//没有响应
    }
  },
  //提供者
  provide() {
    return {
      message1: this.message1
    }
  },
  methods: {
    //改变message1的值，后代组件是不会改变的
    changeMsg1() {
      this.message1 = "我是更改后的数据"
    }
  }
}
</script>
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

后代组件：

<template>
  <div class="TongXinSunZuJIan">
    <h2>这是孙子组件</h2>
    <p>{{message1}}</p>
  </div>
</template>

<script>
export default {
  name: "TongXinSunZuJIan",
  data() {
    return {}
  },
  inject: ["message1"],
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如何变成可响应的呢？

方法1： 传入可响应的对象

//祖先组件
  data() {
    return {
      grandPa: {
        message1: "这是我传给后代组件的值"
      }
    }
  },
  provide() {
    return {
      grandPa: this.grandPa,//传入可响应的对象
    }
  },

//后代组件
<p>{{grandPa.message1}}</p>

inject: ["grandPa"],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法2： 通过计算属性计算注入的值

//祖先组件
data() {
    return {
      age: 5,
    }
  },
  provide() {
    return {
      age: () => this.age//通过计算属性计算注入的值
    }
  }


//后代组件
<p>{{ newAge }}</p>

inject: ["age"],
  computed: {
    newAge() {
      return this.age()
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4、ref/$refs

链接: vue中ref的作用

5、$children、$parent

链接: vue中父子组件之间的访问方式-$children-$refs-$parent

6、vuex

链接: vue2全家桶-vuex