Vue组件间通信方式

1. 父组件给子组件传参最好的方式用：

props，插槽，$attrs，$parent/$children。

$attrs/$listeners：

1. $attrs 中包含了所有父作用域中所有未进行 prop 声明的属性，class 和 style 除外。
2. $listeners 中包含了父作用域中不含 .native 修饰器的所有 v-on 事件。(vue3中已经移除，全部交给$attrs处理)

父子：$parent/$children

1. $parent 可以获取父组件的实例。

2. $children可以获取当前组件的所有子组件实例。(vue3中没有‘$children，如果你需要访问子组件实例，我们建议使用ref`)

   vue3获取ref元素

2. 子组件给父组件传参：

自定义事件，props，ref。

自定义数据传参三条原则：

1. A 组件想让 B 组件给自己传数据，那么就要给 B 组件绑定自定义事件。
2. 自定义事件的回调在哪，哪才能接收到数据。
3. 适用于 子给父传递数据。

// 父组件 APP
<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on）-->
		<Student @atguigu="getStudentName" @demo="m1"/>
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref）-->
		<Student ref="student" @click.native="show"/>
</div>

// 子组件 Student
<button @click="sendStudentlName">把学生名给App</button>

sendStudentlName(){
  // 触发Student组件实例身上的atguigu事件
  this.$emit('atguigu',this.name,666,888,900)
  // this.$emit('demo')
  // this.$emit('click')
},

// 子组件 School
<button @click="sendSchoolName">把学校名给App</button>

sendSchoolName(){
  this.getSchoolName(this.name)
}

这里是vue3中的defineProps和defineEmits

下面这里是vue3中 expose / ref 父获取子的属性或方法

expose / ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。

<template>
  <div>父组件：拿到子组件的message数据：{{ msg }}</div>
  <button @click="callChildFn">调用子组件的方法</button>

  <hr />

  <Child ref="com" />
</template>

<script setup>
  import Child from './child.vue';

  const com = ref(null); // 通过 模板ref 绑定子组件

  const msg = ref('');

  onMounted(() => {
    // 在加载完成后，将子组件的 message 赋值给 msg
    msg.value = com.value.message;
  });

  function callChildFn() {
    console.log(com.value, '====');
    // 调用子组件的 changeMessage 方法
    com.value.show();

    //  重新将 子组件的message 赋值给 msg
    msg.value = com.value.message;
  }
</script>

子组件：
<template>
  <div> 子组件：</div>
</template>
<script setup>
  const message = ref('子组件传递得信息');
  const show = () => {
    console.log('子组件得方法');
  };
  defineExpose({
    message,
    show,
  });
</script>

3. 爷孙组件传参：

$attrs/$listeners，provide/inject

1. $attrs 中包含了所有父作用域中所有未进行 prop 生命的属性，class 和 style 除外。
2. $listeners中包含了父作用域中不含.native修饰器的所有v-on事件。(vue3中已经移除，全部交给‘$attrs处理`)

provide/inject:

1. 在祖先组件中通过 provide 来提供数据，在子组件中通过 inject 来注入数据。
2. 一般业务数据不推荐使用，数据来源不清晰。
3. 适用于自己封装的组件，因为可以明确的知道数据来源。

// 祖辈组件
<template>
  <div id="nav">
    <h3>{{title}}</h3>
    <button @click="setTitle">同时改变title</button>
  </div>
</template>
<script>
	import { ref, provide } from 'vue'
	export default {
		setup() {
			let title = ref('这个要传的值')
			provide('title', title); // provide的第一个为名称，第二个值为所需要传的参数
			let setTitle = () => {
				title.value = '点击后，title会变成这个'; // 点击后都会有响应式哦！
			}
			return {
				title,
				setTitle
			}
		}
	}
</script>

// 后代组件
<template>
  <div class="hello">
    <h4>{{title}}父组件点击之后这个title也会跟着变化哦</h4>
  </div>
</template>
<script>
	import { inject } from 'vue'
	export default {
		let title = inject('title'); // inject的参数为provide过来的名称
		return {
			title
		}
	}
</script>

4. 任意组件间传参：

localStorage、sessionStorage、全局事件总线、消息订阅与发布、vuex、pinia。
pinia详解

— 完 —