第IV章-Ⅰ Vue3组件与组件通信

第IV章-Ⅰ Vue3组件与组件通信

• Vue组件
• • 根组件
  • 全局组件
  • 局部组件
  • 组件模板
  • 父子组件
• 组件间通信
• • 子组件获取父组件数据
  • • 数据传递选项prop
    • 传值校验
    • 单向数据流
  • 父组件获取子组件数据
  • • [emit 方法](#emit 方法)
  • 多级组件通信
  • • [provide 声明要传递的数据](#provide 声明要传递的数据)
    • [inject 接收数据](#inject 接收数据)
• 总结
• 应用场景
• • 单向数据流（Props）
  • 事件通信（Emit）
  • 跨层级通信（Provide/Inject）

Vue组件

根组件

根组件是 Vue 应用的主要入口点。在 Vue 3 中，根组件通常是通过 createApp 函数创建的，然后挂载到一个 DOM 元素上。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

vue2中 根组件时通过new Vue 构造函数创建的。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

全局组件

全局组件在 Vue 3 中通常在应用创建时通过 app.component 方法注册，这意味着它们可以在任何组件模板中无需导入就可以使用。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyGlobalComponent from './components/MyGlobalComponent.vue';

const app = createApp(App);
app.component('MyGlobalComponent', MyGlobalComponent);
app.mount('#app');

局部组件

局部组件只在注册它们的组件内可用。这有助于封装组件逻辑和模板，使其不会泄漏到全局范围。

// App.vue
<template>
  <div>
    <my-local-component />
  </div>
</template>

<script setup>
import MyLocalComponent from './components/MyLocalComponent.vue';

export default {
  components: {
    MyLocalComponent
  }
}
</script>

组件模板

组件模板定义了组件的 HTML 结构。在 Vue 3 中，模板可以在单文件组件 (SFC) 的 标签中定义，或者在 JavaScript 中通过模板字符串定义。

// MyComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');
</script>

父子组件

// ParentComponent.vue
<template>
  <child-component :myProp="parentData" @myEvent="handleEvent"/>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const parentData = ref('Data from parent');
const handleEvent = (data) => console.log('Event received:', data);

export default {
  components: {
    ChildComponent
  }
}
</script>

// ChildComponent.vue
<template>
  <button @click="emitEvent">Send Event</button>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  myProp: String
});
const emit = defineEmits(['myEvent']);

const emitEvent = () => emit('myEvent', 'Data from child');
</script>

组件间通信

子组件获取父组件数据

<!-- ParentComponent.vue -->
<template>
  <child-component :user="userData" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const userData = ref({ name: 'Alice', age: 30 });
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ user.name }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  user: {
    type: Object,
    required: true,
    default: () => ({ name: '', age: 0 })
  }
});
</script>

数据传递选项prop

父组件可以将数据通过 props 传递给子组件。

传值校验

在子组件中，可以对接收的 props 进行类型、必需性等校验。

单向数据流

props 是单向数据流，即只能从父组件流向子组件，子组件不应直接修改接收的 props。

父组件获取子组件数据

<!-- ChildComponent.vue -->
<template>
  <button @click="sendData">Send Data to Parent</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['update']);

const sendData = () => {
  emit('update', { newData: 'Updated info from child' });
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @update="handleUpdate" />
    <p>{{ dataFromChild }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const dataFromChild = ref('');

const handleUpdate = (payload) => {
  console.log('Received data:', payload);
  dataFromChild.value = payload.newData;  // 更新来自子组件的数据
};
</script>

在 <child-component @update="handleUpdate" /> 中，@update 是用来监听来自 ChildComponent 的 update 事件。

handleUpdate 是在父组件中定义的方法，用于处理从子组件接收到的数据。

handleUpdate 函数接收一个参数 payload，这个参数包含了子组件通过 emit 方法发送的数据。

在这个例子中，我们假设 payload 是一个对象，其中包含一个属性 newData。

使用 ref 来定义 dataFromChild，这是一个响应式引用，存储从子组件接收到的数据。

当子组件发送数据时，通过更新 dataFromChild.value，这个更新会自动反映在父组件的模板中，显示最新的值。

emit 方法

子组件可以使用 $emit 方法来向父组件发送事件（可附带数据）。

多级组件通信

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const sharedData = ref('Shared info for deep components');
provide('sharedKey', sharedData);
</script>

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';

const sharedData = inject('sharedKey');
</script>

provide 声明要传递的数据

顶层组件或任意父组件使用 provide 来定义可以被子孙组件注入的数据。

inject 接收数据

任意子孙组件可以使用 inject 来接收上游组件提供的数据。

总结

• 单向数据流（Props）：保证了数据的可预测性和管理性，是最常用的通信方式，适用于父子组件。
• 事件通信（Emit）：允许子组件向父组件发送消息，是实现子向父通信的标准方法。
• 跨层级通信（Provide/Inject）：解决了深层嵌套组件间的通信问题，避免了繁琐的 props 传递。

应用场景

单向数据流（Props）

• 组件封装与重用：当你开发可重用的组件时，如按钮、输入框、选择器等，使用 props 传递数据可以保证组件的独立性和封装性。组件只依赖于通过 props 接收的数据，而不关心数据的来源，这使得组件可以在不同的上下文中重用。
• 父子组件结构：在父子组件的关系中，父组件通常扮演数据源的角色，子组件根据传入的 props 进行渲染。例如，一个博客列表组件（父组件）可能包含多个博客条目组件（子组件），每个条目组件通过 props 接收具体的博客数据。
• 配置组件：使用 props 来传递配置选项，如是否禁用输入框、是否显示边框等，可以让组件的使用更加灵活。

事件通信（Emit）

• 表单组件：在自定义表单控件（如日期选择器、滑块等）中，子组件需要通知父组件用户的交互动作，如选中的日期、滑动的值等。子组件可以使用 emit 来发送这些信息。
• 操作反馈：在用户执行操作如点击按钮时，如果需要父组件处理某些逻辑（如打开弹窗、提交表单等），子组件可以 emit 一个事件来触发父组件的方法。
• 状态更新：当子组件需要更新其不直接拥有的状态时，可以通过 emit 请求父组件进行状态更新。例如，一个任务列表项可能需要通知其父组件来删除一个任务。

跨层级通信（Provide/Inject）

• 主题或配置共享：当需要在整个应用中共享如主题颜色、用户偏好设置等全局数据时，可以在根组件或一个高层组件中 provide 这些数据，任何子组件都可以通过 inject 来访问它。
• 依赖注入：在大型应用中，特定的功能如权限管理、国际化（i18n）工具等可能需要在许多组件中使用。通过 provide/inject 可以将这些工具或服务注入到需要它们的任何组件中，无需通过所有中间组件传递。
• 避免 prop 钻石问题：在复杂的组件结构中，如果多个层级的组件需要相同的数据，使用 provide/inject 可避免多层传递 props，这种情况通常称为 "props drilling" 或 "钻石问题"。