Props
在 Vue 2 中，Props 是用于从父组件向子组件传递数据的一种机制。通过使用 Props，你可以将数据从父组件传递给子组件，并在子组件中使用这些数据。
在使用 Props 时，需要注意以下几点：
在父组件中定义 Props：
在父组件中，通过使用子组件标签上的属性的形式传递数据给子组件。例如， 中的 :propName 是 Vue 的绑定语法，用于将父组件的 data 属性的值传递给子组件的 propName 属性。
在父组件中，可以通过 v-bind 或简写符号 : 来绑定数据到子组件的 Props。例如，:propName="data" 可以将父组件中的 data 数据绑定到子组件的 propName 属性。
在子组件中声明 Props：
在子组件中，通过 props 选项声明接收的数据。可以使用 props 数组来指定要接收的属性。例如, props: ['propName'] 表示该子组件将接收来自父组件的 propName 属性。
你还可以使用对象形式的 props 声明，以指定更多的选项。例如，props: { propName: { type: String, required: true } } 可以指定 propName 属性为必需且类型为 String。
在子组件中使用 Props：
在子组件的模板中，可以通过使用 {
{ propName }} 或者其他方式来访问和显示接收到的 propName 属性的值。
如果需要在子组件中对 Props 进行进一步操作，可以将 Props 的值绑定到子组件的局部数据属性，然后在子组件中对该局部数据进行处理。
举个例子：
父组件 ParentComponent.vue：
<template>
<div>
<h2>父组件</h2>
<ChildComponent :message="parentMessage" :count="parentCount"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: '这是来自父组件的消息',
parentCount: 10,
};
},
};
</script>
子组件 ChildComponent.vue：
<template>
<div>
<h3>子组件</h3>
<p>{
{ message }}</p>
<button @click="incrementCount">{
{ count }}</button>
</div>
</template>
<script>
export default {
props: ['message', 'count'],
methods: {
incrementCount() {
this.$emit('update:count', this.count + 1);
},
},
};
</script>
在上面的例子中，父组件中通过属性 :message 和 :count 将数据 parentMessage 和 parentCount 传递给子组件。而子组件中通过声明 props: ['message', 'count'] 来接收这些数据，并在模板中使用 { { message }} 和 { { count }} 显示出来。
另外，在子组件中，我们还使用了一个方法 incrementCount()，当按钮被点击时，会触发该方法，然后通过 $emit 方法将更新后的 count 值发送给父组件。
通过这个例子，你可以看到如何在 Vue 2 中使用 Props，以及如何将数据从父组件传递给子组件并在子组件中使用。
父子通信的概念
在 Vue 中，父子组件之间的通信可以通过 Props 和自定义事件实现。
仔细观察上面的例子，父组件通过属性绑定方式将数据 parentMessage 和 parentCount 传递给子组件，即 <ChildComponent :message="parentMessage" :count="parentCount"></ChildComponent>。
而子组件中，则通过声明 props: ['message', 'count'] 来接收这些数据，并在模板中使用 { { message }} 和 { { count }} 显示出来。这就是通过 Props 实现父组件向子组件传递数据的过程。
另外，在子组件中，我们还使用了一个方法 incrementCount()，当按钮被点击时，会触发该方法。然后通过 $emit 方法，子组件向父组件发送自定义事件 update:count，并携带更新后的 count 值作为参数。父组件可以通过监听这个自定义事件来接收子组件发送的数据，并进行相应的处理。
这样，通过 Props 和自定义事件，父组件和子组件之间实现了双向通信。
父子通信实战
我有这样一个效果要做，就是 有三个组件 A B C, 其中 A是B的父，B是C的父，C组件中有一个点赞按钮，当点赞后，A组件中就会显示该点赞的用户，如何使用该组件通信来实现
首先，我们需要创建三个组件：A.vue、B.vue 和 C.vue。
A.vue 是 B 的父组件：
<template>
<div>
<h2>组件 A</h2>
<B @like="handleLike"></B>
<p v-if="likedUsers.length > 0">
点赞用户：{
{ likedUsers.join(', ') }}
</p>
</div>
</template>
<script>
import B from './B.vue';
export default {
components: {
B,
},
data() {
return {
likedUsers: [],
};
},
methods: {
handleLike(user) {
this.likedUsers.push(user);
},
},
};
</script>
B.vue 是 C 的父组件，并通过 Props 将点赞事件传递给 C 组件：
<template>
<div>
<h3>组件 B</h3>
<C @like="handleLike"></C>
</div>
</template>
<script>
import C from './C.vue';
export default {
components: {
C,
},
methods: {
handleLike(user) {
this.$emit('like', user);
},
},
};
</script>
C.vue 是最内层的组件，它包含一个点赞按钮，点击时将点赞事件发送给 B 组件：
<template>
<div>
<h4>组件 C</h4>
<button @click="like">点赞</button>
</div>
</template>
<script>
export default {
methods: {
like() {
const user = '用户A'; // 假设当前点赞用户为用户A
this.$emit('like', user);
},
},
};
</script>
在这个示例中，当在组件 C 中点击点赞按钮时，通过 $emit 方法发送了一个自定义事件 like，并携带了点赞的用户信息。接着 B 组件监听到了这个事件，并通过 $emit 方法将事件再次向上传递给 A 组件。最后，在 A 组件中，通过监听这个自定义事件，并更新 likedUsers 数组，从而实现了点赞用户的显示。
通过这种方式，父子组件之间的通信被实现，可以在不同层级的组件中传递数据和触发相应的逻辑
谢谢款待
