vue3.x 组件间传参

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）-->