vue3组件通信与props

title: vue3组件通信与props
date: 2024/5/31 下午9:00:57
updated: 2024/5/31 下午9:00:57
categories:

• 前端开发
  

tags:

• Vue3组件
  
• Props详解
  
• 生命周期
  
• 数据通信
  
• 模板语法
  
• Composition API
  
• 单向数据流
  

Vue 3 组件基础

在 Vue 3 中，组件是构建用户界面的基本单位，它们是可复用的 Vue 实例，具有自己的模板、数据、方法等。组件化开发使得代码更加模块化，易于管理和维护。以下是 Vue 3 组件的基础知识：
1. 组件的创建与注册

在 Vue 3 中，组件需要先定义后使用。定义组件的方式有两种：全局注册和局部注册。
全局注册

全局注册的组件可以在任何地方使用，通过 app.component 方法进行注册：

1. import { createApp } from 'vue';
2. import App from './App.vue';
4. const app = createApp(App);
6. app.component('my-component', {
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template>// 组件选项
12. });
14. app.mount('#app');

复制代码

局部注册

局部注册的组件只能在注册它的组件内部使用，通常在组件的 components 选项中进行注册：

1. export default {
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>components: {
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template><template>
12. <template>
13.   <ChildComponent @child-event="handleChildEvent" />
14. </template><ChildComponent :prop-name="dynamicValue" />
15. </template>'my-component': {
16. <template>
17. <template>
18.   <ChildComponent @child-event="handleChildEvent" />
19. </template><ChildComponent :prop-name="dynamicValue" />
20. </template><template>
21. <template>
22.   <ChildComponent @child-event="handleChildEvent" />
23. </template><ChildComponent :prop-name="dynamicValue" />
24. </template><template>
25. <template>
26.   <ChildComponent @child-event="handleChildEvent" />
27. </template><ChildComponent :prop-name="dynamicValue" />
28. </template>// 组件选项
29. <template>
30. <template>
31.   <ChildComponent @child-event="handleChildEvent" />
32. </template><ChildComponent :prop-name="dynamicValue" />
33. </template><template>
34. <template>
35.   <ChildComponent @child-event="handleChildEvent" />
36. </template><ChildComponent :prop-name="dynamicValue" />
37. </template>}
38. <template>
39. <template>
40.   <ChildComponent @child-event="handleChildEvent" />
41. </template><ChildComponent :prop-name="dynamicValue" />
42. </template>}
43. }

复制代码

2. 组件选项

组件选项包括模板、数据、方法、生命周期钩子等。
模板 (Template)

组件的模板定义了组件的结构，可以使用 HTML 和 Vue 的模板语法：

1. <template>
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template><template>
12. <template>
13.   <ChildComponent @child-event="handleChildEvent" />
14. </template><ChildComponent :prop-name="dynamicValue" />
15. </template><h1>{{ title }}</h1>
16. <template>
17. <template>
18.   <ChildComponent @child-event="handleChildEvent" />
19. </template><ChildComponent :prop-name="dynamicValue" />
20. </template><template>
21. <template>
22.   <ChildComponent @child-event="handleChildEvent" />
23. </template><ChildComponent :prop-name="dynamicValue" />
24. </template><p>{{ content }}</p>
25. <template>
26. <template>
27.   <ChildComponent @child-event="handleChildEvent" />
28. </template><ChildComponent :prop-name="dynamicValue" />
29. </template>
30. </template>

复制代码

数据 (Data)

组件的数据是响应式的，需要是一个函数，返回一个数据对象：

1. export default {
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>data() {
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template><template>
12. <template>
13.   <ChildComponent @child-event="handleChildEvent" />
14. </template><ChildComponent :prop-name="dynamicValue" />
15. </template>return {
16. <template>
17. <template>
18.   <ChildComponent @child-event="handleChildEvent" />
19. </template><ChildComponent :prop-name="dynamicValue" />
20. </template><template>
21. <template>
22.   <ChildComponent @child-event="handleChildEvent" />
23. </template><ChildComponent :prop-name="dynamicValue" />
24. </template><template>
25. <template>
26.   <ChildComponent @child-event="handleChildEvent" />
27. </template><ChildComponent :prop-name="dynamicValue" />
28. </template>title: 'Hello Vue 3',
29. <template>
30. <template>
31.   <ChildComponent @child-event="handleChildEvent" />
32. </template><ChildComponent :prop-name="dynamicValue" />
33. </template><template>
34. <template>
35.   <ChildComponent @child-event="handleChildEvent" />
36. </template><ChildComponent :prop-name="dynamicValue" />
37. </template><template>
38. <template>
39.   <ChildComponent @child-event="handleChildEvent" />
40. </template><ChildComponent :prop-name="dynamicValue" />
41. </template>content: 'Welcome to Vue 3 component basics.'
42. <template>
43. <template>
44.   <ChildComponent @child-event="handleChildEvent" />
45. </template><ChildComponent :prop-name="dynamicValue" />
46. </template><template>
47. <template>
48.   <ChildComponent @child-event="handleChildEvent" />
49. </template><ChildComponent :prop-name="dynamicValue" />
50. </template>};
51. <template>
52. <template>
53.   <ChildComponent @child-event="handleChildEvent" />
54. </template><ChildComponent :prop-name="dynamicValue" />
55. </template>}
56. }

复制代码

方法 (Methods)

组件的方法定义在 methods 选项中，可以在模板中通过事件绑定来调用：

1. export default {
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>methods: {
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template><template>
12. <template>
13.   <ChildComponent @child-event="handleChildEvent" />
14. </template><ChildComponent :prop-name="dynamicValue" />
15. </template>greet() {
16. <template>
17. <template>
18.   <ChildComponent @child-event="handleChildEvent" />
19. </template><ChildComponent :prop-name="dynamicValue" />
20. </template><template>
21. <template>
22.   <ChildComponent @child-event="handleChildEvent" />
23. </template><ChildComponent :prop-name="dynamicValue" />
24. </template><template>
25. <template>
26.   <ChildComponent @child-event="handleChildEvent" />
27. </template><ChildComponent :prop-name="dynamicValue" />
28. </template>alert('Hello from Vue 3 component!');
29. <template>
30. <template>
31.   <ChildComponent @child-event="handleChildEvent" />
32. </template><ChildComponent :prop-name="dynamicValue" />
33. </template><template>
34. <template>
35.   <ChildComponent @child-event="handleChildEvent" />
36. </template><ChildComponent :prop-name="dynamicValue" />
37. </template>}
38. <template>
39. <template>
40.   <ChildComponent @child-event="handleChildEvent" />
41. </template><ChildComponent :prop-name="dynamicValue" />
42. </template>}
43. }

复制代码

生命周期钩子 (Lifecycle Hooks)

Vue 3 提供了多个生命周期钩子，允许你在组件的不同阶段执行代码。例如：

1. export default {
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>created() {
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template><template>
12. <template>
13.   <ChildComponent @child-event="handleChildEvent" />
14. </template><ChildComponent :prop-name="dynamicValue" />
15. </template>console.log('Component created');
16. <template>
17. <template>
18.   <ChildComponent @child-event="handleChildEvent" />
19. </template><ChildComponent :prop-name="dynamicValue" />
20. </template>},
21. <template>
22. <template>
23.   <ChildComponent @child-event="handleChildEvent" />
24. </template><ChildComponent :prop-name="dynamicValue" />
25. </template>mounted() {
26. <template>
27. <template>
28.   <ChildComponent @child-event="handleChildEvent" />
29. </template><ChildComponent :prop-name="dynamicValue" />
30. </template><template>
31. <template>
32.   <ChildComponent @child-event="handleChildEvent" />
33. </template><ChildComponent :prop-name="dynamicValue" />
34. </template>console.log('Component mounted');
35. <template>
36. <template>
37.   <ChildComponent @child-event="handleChildEvent" />
38. </template><ChildComponent :prop-name="dynamicValue" />
39. </template>}
40. }

复制代码

3. 组件通信

组件之间的通信是 Vue 应用中的常见需求，Vue 3 提供了多种通信方式，包括 props、自定义事件、插槽等。
Props

Props 允许父组件向子组件传递数据：

1. // 子组件
2. export default {
3. <template>
4. <template>
5.   <ChildComponent @child-event="handleChildEvent" />
6. </template><ChildComponent :prop-name="dynamicValue" />
7. </template>props: {
8. <template>
9. <template>
10.   <ChildComponent @child-event="handleChildEvent" />
11. </template><ChildComponent :prop-name="dynamicValue" />
12. </template><template>
13. <template>
14.   <ChildComponent @child-event="handleChildEvent" />
15. </template><ChildComponent :prop-name="dynamicValue" />
16. </template>message: String
17. <template>
18. <template>
19.   <ChildComponent @child-event="handleChildEvent" />
20. </template><ChildComponent :prop-name="dynamicValue" />
21. </template>}
22. }
24. // 父组件
25. <child-component :message="hello"></child-component>

复制代码

自定义事件

子组件可以通过自定义事件向父组件传递数据：

1. // 子组件
2. this.$emit('my-event', data);
4. // 父组件
5. <child-component @my-event="handleEvent"></child-component>

复制代码

插槽 (Slots)

插槽允许父组件向子组件传递内容：

1. <slot></slot>
4. <child-component>
5. <template>
6. <template>
7.   <ChildComponent @child-event="handleChildEvent" />
8. </template><ChildComponent :prop-name="dynamicValue" />
9. </template><p>This content is passed to the child component via slot.</p>
10. </child-component>

复制代码

4. 组件的复用与组合

Vue 3 鼓励组件的复用和组合，通过 props、插槽等方式，可以构建出高度可复用的组件库。同时，Vue 3 还引入了 Composition API，使得组件的逻辑更加清晰和易于复用。
什么是 props？

在 Vue.js 框架中，props 是一个组件的属性，它可以接收来自父组件的数据，并将其传递到子组件中。props 使得子组件能够接收外部传入的信息，从而可以在不需要知道外部具体细节的情况下，实现与父组件的交互和数据传递。
Props 的作用

• 传参：父组件可以通过 props 将数据传递给子组件。
  
• 验证数据类型：在定义 props 时，可以指定期望的数据类型，这样 Vue 会在开发过程中进行类型检查，并在浏览器控制台中抛出警告，有助于提前发现潜在问题。
  
• 设置默认值：如果父组件没有传递相应的 prop，可以设置默认值以确保子组件能够接收到一个合理的默认值。
  

Props 的使用

在 Vue 3 中，定义 props 的方式有几种，包括使用字符串数组、对象形式以及使用 TypeScript 的类型注解。
字符串数组形式

1. export default {
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>props: ['message']
7. }

复制代码

这表示组件期望接收一个名为 message 的 prop，它是一个字符串类型。
对象形式

1. export default {
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>props: {
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template><template>
12. <template>
13.   <ChildComponent @child-event="handleChildEvent" />
14. </template><ChildComponent :prop-name="dynamicValue" />
15. </template>message: String,
16. <template>
17. <template>
18.   <ChildComponent @child-event="handleChildEvent" />
19. </template><ChildComponent :prop-name="dynamicValue" />
20. </template><template>
21. <template>
22.   <ChildComponent @child-event="handleChildEvent" />
23. </template><ChildComponent :prop-name="dynamicValue" />
24. </template>title: {
25. <template>
26. <template>
27.   <ChildComponent @child-event="handleChildEvent" />
28. </template><ChildComponent :prop-name="dynamicValue" />
29. </template><template>
30. <template>
31.   <ChildComponent @child-event="handleChildEvent" />
32. </template><ChildComponent :prop-name="dynamicValue" />
33. </template><template>
34. <template>
35.   <ChildComponent @child-event="handleChildEvent" />
36. </template><ChildComponent :prop-name="dynamicValue" />
37. </template>type: String,
38. <template>
39. <template>
40.   <ChildComponent @child-event="handleChildEvent" />
41. </template><ChildComponent :prop-name="dynamicValue" />
42. </template><template>
43. <template>
44.   <ChildComponent @child-event="handleChildEvent" />
45. </template><ChildComponent :prop-name="dynamicValue" />
46. </template><template>
47. <template>
48.   <ChildComponent @child-event="handleChildEvent" />
49. </template><ChildComponent :prop-name="dynamicValue" />
50. </template>default: 'Default Title'
51. <template>
52. <template>
53.   <ChildComponent @child-event="handleChildEvent" />
54. </template><ChildComponent :prop-name="dynamicValue" />
55. </template><template>
56. <template>
57.   <ChildComponent @child-event="handleChildEvent" />
58. </template><ChildComponent :prop-name="dynamicValue" />
59. </template>}
60. <template>
61. <template>
62.   <ChildComponent @child-event="handleChildEvent" />
63. </template><ChildComponent :prop-name="dynamicValue" />
64. </template>}
65. }

复制代码

这种方式下，message 被指定为字符串类型，而 title 被指定为字符串类型，并且有一个默认值。
TypeScript 类型注解

在使用 TypeScript 时，可以利用类型注解来定义 props：

1. export default {
2. <template>
3. <template>
4.   <ChildComponent @child-event="handleChildEvent" />
5. </template><ChildComponent :prop-name="dynamicValue" />
6. </template>props: {
7. <template>
8. <template>
9.   <ChildComponent @child-event="handleChildEvent" />
10. </template><ChildComponent :prop-name="dynamicValue" />
11. </template><template>
12. <template>
13.   <ChildComponent @child-event="handleChildEvent" />
14. </template><ChildComponent :prop-name="dynamicValue" />
15. </template>message: string,
16. <template>
17. <template>
18.   <ChildComponent @child-event="handleChildEvent" />
19. </template><ChildComponent :prop-name="dynamicValue" />
20. </template><template>
21. <template>
22.   <ChildComponent @child-event="handleChildEvent" />
23. </template><ChildComponent :prop-name="dynamicValue" />
24. </template>title: string
25. <template>
26. <template>
27.   <ChildComponent @child-event="handleChildEvent" />
28. </template><ChildComponent :prop-name="dynamicValue" />
29. </template>}
30. }

复制代码

Props 的传递

在父组件中，通过在模板中使用 v-bind 指令或者简写为 : 来传递 props：

1. [/code]在这里，parentMessage 是父组件中的一个数据属性，它将被传递给名为 child-component 的子组件。
2. [size=4]Props 的验证[/size]
4. 在 Vue.js 中，props 验证是指对组件传入的 props 进行类型检查和默认值设置等验证。Vue 提供了一个可选的验证功能，可以在定义 props 时进行设置。以下是一些常见的 props 验证规则：
5. [list=1]
6. [*][b]类型验证[/b]：可以指定 props 的类型，如 String、Number、Boolean、Array、Object 等。
7. [*][b]默认值[/b]：可以为 props 设置默认值，如果未传入 prop，则使用默认值。
8. [*][b]必需性[/b]：可以指定 props 是否为必需，如果为必需，则必须在父组件中传入。
9. [*][b]自定义验证[/b]：可以使用 validator 函数进行自定义验证。
10. [*][b]单位转换[/b]：对于数值类型，可以指定单位，如 px、% 等，Vue 会自动进行单位转换。
11. [/list]下面是一个使用 props 验证的例子：
12. [code]export default {
13. <template>
14. <template>
15.   <ChildComponent @child-event="handleChildEvent" />
16. </template><ChildComponent :prop-name="dynamicValue" />
17. </template>props: {
18. <template>
19. <template>
20.   <ChildComponent @child-event="handleChildEvent" />
21. </template><ChildComponent :prop-name="dynamicValue" />
22. </template><template>
23. <template>
24.   <ChildComponent @child-event="handleChildEvent" />
25. </template><ChildComponent :prop-name="dynamicValue" />
26. </template>// 基本类型验证
27. <template>
28. <template>
29.   <ChildComponent @child-event="handleChildEvent" />
30. </template><ChildComponent :prop-name="dynamicValue" />
31. </template><template>
32. <template>
33.   <ChildComponent @child-event="handleChildEvent" />
34. </template><ChildComponent :prop-name="dynamicValue" />
35. </template>title: {
36. <template>
37. <template>
38.   <ChildComponent @child-event="handleChildEvent" />
39. </template><ChildComponent :prop-name="dynamicValue" />
40. </template><template>
41. <template>
42.   <ChildComponent @child-event="handleChildEvent" />
43. </template><ChildComponent :prop-name="dynamicValue" />
44. </template><template>
45. <template>
46.   <ChildComponent @child-event="handleChildEvent" />
47. </template><ChildComponent :prop-name="dynamicValue" />
48. </template>type: String,
49. <template>
50. <template>
51.   <ChildComponent @child-event="handleChildEvent" />
52. </template><ChildComponent :prop-name="dynamicValue" />
53. </template><template>
54. <template>
55.   <ChildComponent @child-event="handleChildEvent" />
56. </template><ChildComponent :prop-name="dynamicValue" />
57. </template><template>
58. <template>
59.   <ChildComponent @child-event="handleChildEvent" />
60. </template><ChildComponent :prop-name="dynamicValue" />
61. </template>default: '默认标题'
62. <template>
63. <template>
64.   <ChildComponent @child-event="handleChildEvent" />
65. </template><ChildComponent :prop-name="dynamicValue" />
66. </template><template>
67. <template>
68.   <ChildComponent @child-event="handleChildEvent" />
69. </template><ChildComponent :prop-name="dynamicValue" />
70. </template>},
71. <template>
72. <template>
73.   <ChildComponent @child-event="handleChildEvent" />
74. </template><ChildComponent :prop-name="dynamicValue" />
75. </template><template>
76. <template>
77.   <ChildComponent @child-event="handleChildEvent" />
78. </template><ChildComponent :prop-name="dynamicValue" />
79. </template>// 数值类型验证，可以指定单位
80. <template>
81. <template>
82.   <ChildComponent @child-event="handleChildEvent" />
83. </template><ChildComponent :prop-name="dynamicValue" />
84. </template><template>
85. <template>
86.   <ChildComponent @child-event="handleChildEvent" />
87. </template><ChildComponent :prop-name="dynamicValue" />
88. </template>width: {
89. <template>
90. <template>
91.   <ChildComponent @child-event="handleChildEvent" />
92. </template><ChildComponent :prop-name="dynamicValue" />
93. </template><template>
94. <template>
95.   <ChildComponent @child-event="handleChildEvent" />
96. </template><ChildComponent :prop-name="dynamicValue" />
97. </template><template>
98. <template>
99.   <ChildComponent @child-event="handleChildEvent" />
100. </template><ChildComponent :prop-name="dynamicValue" />
101. </template>type: Number,
102. <template>
103. <template>
104.   <ChildComponent @child-event="handleChildEvent" />
105. </template><ChildComponent :prop-name="dynamicValue" />
106. </template><template>
107. <template>
108.   <ChildComponent @child-event="handleChildEvent" />
109. </template><ChildComponent :prop-name="dynamicValue" />
110. </template><template>
111. <template>
112.   <ChildComponent @child-event="handleChildEvent" />
113. </template><ChildComponent :prop-name="dynamicValue" />
114. </template>default: 100,
115. <template>
116. <template>
117.   <ChildComponent @child-event="handleChildEvent" />
118. </template><ChildComponent :prop-name="dynamicValue" />
119. </template><template>
120. <template>
121.   <ChildComponent @child-event="handleChildEvent" />
122. </template><ChildComponent :prop-name="dynamicValue" />
123. </template><template>
124. <template>
125.   <ChildComponent @child-event="handleChildEvent" />
126. </template><ChildComponent :prop-name="dynamicValue" />
127. </template>validator: (value) => {
128. <template>
129. <template>
130.   <ChildComponent @child-event="handleChildEvent" />
131. </template><ChildComponent :prop-name="dynamicValue" />
132. </template><template>
133. <template>
134.   <ChildComponent @child-event="handleChildEvent" />
135. </template><ChildComponent :prop-name="dynamicValue" />
136. </template><template>
137. <template>
138.   <ChildComponent @child-event="handleChildEvent" />
139. </template><ChildComponent :prop-name="dynamicValue" />
140. </template><template>
141. <template>
142.   <ChildComponent @child-event="handleChildEvent" />
143. </template><ChildComponent :prop-name="dynamicValue" />
144. </template>return value >= 0; // 自定义验证，确保宽度非负
145. <template>
146. <template>
147.   <ChildComponent @child-event="handleChildEvent" />
148. </template><ChildComponent :prop-name="dynamicValue" />
149. </template><template>
150. <template>
151.   <ChildComponent @child-event="handleChildEvent" />
152. </template><ChildComponent :prop-name="dynamicValue" />
153. </template><template>
154. <template>
155.   <ChildComponent @child-event="handleChildEvent" />
156. </template><ChildComponent :prop-name="dynamicValue" />
157. </template>}
158. <template>
159. <template>
160.   <ChildComponent @child-event="handleChildEvent" />
161. </template><ChildComponent :prop-name="dynamicValue" />
162. </template><template>
163. <template>
164.   <ChildComponent @child-event="handleChildEvent" />
165. </template><ChildComponent :prop-name="dynamicValue" />
166. </template>},
167. <template>
168. <template>
169.   <ChildComponent @child-event="handleChildEvent" />
170. </template><ChildComponent :prop-name="dynamicValue" />
171. </template><template>
172. <template>
173.   <ChildComponent @child-event="handleChildEvent" />
174. </template><ChildComponent :prop-name="dynamicValue" />
175. </template>// 数组类型验证
176. <template>
177. <template>
178.   <ChildComponent @child-event="handleChildEvent" />
179. </template><ChildComponent :prop-name="dynamicValue" />
180. </template><template>
181. <template>
182.   <ChildComponent @child-event="handleChildEvent" />
183. </template><ChildComponent :prop-name="dynamicValue" />
184. </template>items: {
185. <template>
186. <template>
187.   <ChildComponent @child-event="handleChildEvent" />
188. </template><ChildComponent :prop-name="dynamicValue" />
189. </template><template>
190. <template>
191.   <ChildComponent @child-event="handleChildEvent" />
192. </template><ChildComponent :prop-name="dynamicValue" />
193. </template><template>
194. <template>
195.   <ChildComponent @child-event="handleChildEvent" />
196. </template><ChildComponent :prop-name="dynamicValue" />
197. </template>type: Array,
198. <template>
199. <template>
200.   <ChildComponent @child-event="handleChildEvent" />
201. </template><ChildComponent :prop-name="dynamicValue" />
202. </template><template>
203. <template>
204.   <ChildComponent @child-event="handleChildEvent" />
205. </template><ChildComponent :prop-name="dynamicValue" />
206. </template><template>
207. <template>
208.   <ChildComponent @child-event="handleChildEvent" />
209. </template><ChildComponent :prop-name="dynamicValue" />
210. </template>default: () => []
211. <template>
212. <template>
213.   <ChildComponent @child-event="handleChildEvent" />
214. </template><ChildComponent :prop-name="dynamicValue" />
215. </template><template>
216. <template>
217.   <ChildComponent @child-event="handleChildEvent" />
218. </template><ChildComponent :prop-name="dynamicValue" />
219. </template>},
220. <template>
221. <template>
222.   <ChildComponent @child-event="handleChildEvent" />
223. </template><ChildComponent :prop-name="dynamicValue" />
224. </template><template>
225. <template>
226.   <ChildComponent @child-event="handleChildEvent" />
227. </template><ChildComponent :prop-name="dynamicValue" />
228. </template>// 对象类型验证
229. <template>
230. <template>
231.   <ChildComponent @child-event="handleChildEvent" />
232. </template><ChildComponent :prop-name="dynamicValue" />
233. </template><template>
234. <template>
235.   <ChildComponent @child-event="handleChildEvent" />
236. </template><ChildComponent :prop-name="dynamicValue" />
237. </template>config: {
238. <template>
239. <template>
240.   <ChildComponent @child-event="handleChildEvent" />
241. </template><ChildComponent :prop-name="dynamicValue" />
242. </template><template>
243. <template>
244.   <ChildComponent @child-event="handleChildEvent" />
245. </template><ChildComponent :prop-name="dynamicValue" />
246. </template><template>
247. <template>
248.   <ChildComponent @child-event="handleChildEvent" />
249. </template><ChildComponent :prop-name="dynamicValue" />
250. </template>type: Object,
251. <template>
252. <template>
253.   <ChildComponent @child-event="handleChildEvent" />
254. </template><ChildComponent :prop-name="dynamicValue" />
255. </template><template>
256. <template>
257.   <ChildComponent @child-event="handleChildEvent" />
258. </template><ChildComponent :prop-name="dynamicValue" />
259. </template><template>
260. <template>
261.   <ChildComponent @child-event="handleChildEvent" />
262. </template><ChildComponent :prop-name="dynamicValue" />
263. </template>default: () => ({})
264. <template>
265. <template>
266.   <ChildComponent @child-event="handleChildEvent" />
267. </template><ChildComponent :prop-name="dynamicValue" />
268. </template><template>
269. <template>
270.   <ChildComponent @child-event="handleChildEvent" />
271. </template><ChildComponent :prop-name="dynamicValue" />
272. </template>},
273. <template>
274. <template>
275.   <ChildComponent @child-event="handleChildEvent" />
276. </template><ChildComponent :prop-name="dynamicValue" />
277. </template><template>
278. <template>
279.   <ChildComponent @child-event="handleChildEvent" />
280. </template><ChildComponent :prop-name="dynamicValue" />
281. </template>// 布尔值类型验证
282. <template>
283. <template>
284.   <ChildComponent @child-event="handleChildEvent" />
285. </template><ChildComponent :prop-name="dynamicValue" />
286. </template><template>
287. <template>
288.   <ChildComponent @child-event="handleChildEvent" />
289. </template><ChildComponent :prop-name="dynamicValue" />
290. </template>isActive: {
291. <template>
292. <template>
293.   <ChildComponent @child-event="handleChildEvent" />
294. </template><ChildComponent :prop-name="dynamicValue" />
295. </template><template>
296. <template>
297.   <ChildComponent @child-event="handleChildEvent" />
298. </template><ChildComponent :prop-name="dynamicValue" />
299. </template><template>
300. <template>
301.   <ChildComponent @child-event="handleChildEvent" />
302. </template><ChildComponent :prop-name="dynamicValue" />
303. </template>type: Boolean,
304. <template>
305. <template>
306.   <ChildComponent @child-event="handleChildEvent" />
307. </template><ChildComponent :prop-name="dynamicValue" />
308. </template><template>
309. <template>
310.   <ChildComponent @child-event="handleChildEvent" />
311. </template><ChildComponent :prop-name="dynamicValue" />
312. </template><template>
313. <template>
314.   <ChildComponent @child-event="handleChildEvent" />
315. </template><ChildComponent :prop-name="dynamicValue" />
316. </template>default: false
317. <template>
318. <template>
319.   <ChildComponent @child-event="handleChildEvent" />
320. </template><ChildComponent :prop-name="dynamicValue" />
321. </template><template>
322. <template>
323.   <ChildComponent @child-event="handleChildEvent" />
324. </template><ChildComponent :prop-name="dynamicValue" />
325. </template>}
326. <template>
327. <template>
328.   <ChildComponent @child-event="handleChildEvent" />
329. </template><ChildComponent :prop-name="dynamicValue" />
330. </template>}
331. }

复制代码

在这个例子中，title 被验证为字符串类型，有一个默认值；width 被验证为数值类型，有一个默认值，并且有一个自定义的验证函数确保它非负；items 被验证为数组类型，有一个默认的空数组；config 被验证为对象类型，有一个默认的空对象；isActive 被验证为布尔类型，有一个默认的 false 值。
如果父组件传递给子组件的 props 不满足这些验证规则，Vue 将抛出一个警告。这些验证规则有助于确保组件接收到的数据是预期的类型和格式，从而提高组件的健壮性。AD：首页 | 一个覆盖广泛主题工具的高效在线平台
动态Props

在Vue中，动态Props指的是父组件向子组件传递的Props值可以在运行时动态确定。这可以通过使用v-bind指令或简写为:来实现。动态Props的值可以是表达式、计算属性或方法返回的结果。

1. <template>
2. <template>
3.   <ChildComponent @child-event="handleChildEvent" />
4. </template><ChildComponent :prop-name="dynamicValue" />
5. </template>

复制代码

单向数据流

在Vue中，单向数据流指的是数据只能从父组件流向子组件，不能反向流动。这是通过props和emit方法实现的。props用于父组件向子组件传递数据，而emit方法允许子组件向父组件发送事件。
AD：专业搜索引擎
父子组件通信

父子组件通信主要有以下几种方式：

• Props：父组件通过Props向子组件传递数据。
  
• **\(emit 方法**：子组件通过`\)emit方法触发事件，父组件通过@eventName`监听这些事件。
  

1. <template>
2. <template>
3.   <ChildComponent @child-event="handleChildEvent" />
4. </template><ChildComponent :prop-name="dynamicValue" />
5. </template>

复制代码

1. <template>
2. <template>
3.   <ChildComponent @child-event="handleChildEvent" />
4. </template><ChildComponent :prop-name="dynamicValue" />
5. </template>发送消息给父组件

复制代码

非父子组件通信

非父子组件通信有以下几种方式：

• Provide 和 Inject：祖先组件通过provide选项来提供变量，所有的子孙组件都可以通过inject选项来接收这个变量。
  AD：漫画首页
  
• Event Bus：创建一个中央事件总线实例，不同组件通过触发或监听事件来进行通信。
  

1. // 创建Event Bus实例const eventBus = new Vue();// 祖先组件eventBus.$emit('update-data', 'some data');// 后代组件eventBus.$on('update-data', (data) => {<template>
2. <template>
3.   <ChildComponent @child-event="handleChildEvent" />
4. </template><ChildComponent :prop-name="dynamicValue" />
5. </template>console.log('收到数据:', data);});

复制代码

Props 的限制

• 类型限制：可以指定props的类型，如String、Number、Boolean等。
  
• 默认值：可以为props设置默认值。
  
• 必需性：可以指定props是否为必需。
  
• 自定义验证：可以使用validator函数进行自定义验证。
  
• 单位转换：对于数值类型，可以指定单位，如px、%等，Vue会自动进行单位转换。
  

总结

Vue.js通过提供灵活的组件通信机制，使得前端开发更加高效和模块化。父子组件之间的通信通过props和emit实现，遵循单向数据流原则；非父子组件间则可以通过provide和inject，或者事件总线来实现。这些通信机制不仅使得组件之间的数据传递更加清晰，也提高了应用的可维护性。同时，props的验证机制确保了组件接收到的数据是符合预期格式的，增加了组件的稳定性。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！