使用props和emits来实现的组件通信在Vue.js（包括Vue 3）中非常常见，适用于多种场景。以下是一些典型的使用场景：
1. 父组件向子组件传递数据（Props）
- 场景描述：父组件需要向子组件提供数据，以便子组件能够显示或处理这些数据。
- 实现方式：在父组件的模板中，通过属性（attributes）将数据传递给子组件。在子组件中，通过
props选项来声明和接收这些数据。
2. 子组件向父组件发送事件（Emits）
- 场景描述：子组件需要通知父组件某些事件的发生，或者需要向父组件发送数据。
- 实现方式：在子组件中，通过
this.$emit方法触发事件，并可以传递数据作为事件的参数。在父组件的模板中，通过监听子组件的自定义事件来接收这些通知和数据。
3. 父子组件之间的双向数据绑定（v-model）
- 场景描述：在某些情况下，父组件和子组件之间需要实现双向数据绑定，即父组件的数据可以影响子组件的显示，同时子组件的某些操作也可以更新父组件的数据。
- 实现方式：Vue提供了
v-model指令来实现表单输入元素的双向数据绑定。对于自定义组件，可以通过在子组件中接受一个名为modelValue（或自定义的prop名，但需要在父组件中使用.sync修饰符或v-model:xxx来匹配）的prop，并触发一个名为update:modelValue（或自定义的事件名）的事件来实现双向绑定。
4. 父组件控制子组件的行为（通过Props传递函数或对象）
- 场景描述：父组件需要控制子组件的某些行为，例如改变子组件的状态、调用子组件的方法等。
- 实现方式：可以通过props将函数或对象传递给子组件。子组件可以通过调用这些函数或访问这些对象来改变自己的行为。这种方法允许父组件对子组件进行更细粒度的控制。
5. 子组件的初始化数据和配置（通过Props传递配置对象）
- 场景描述：子组件需要一些初始化数据或配置信息来正确工作，这些信息通常由父组件提供。
- 实现方式：可以通过props将一个包含所需数据和配置的对象传递给子组件。子组件在接收到这个对象后，可以根据其中的信息来初始化自己的状态或配置其行为。
6. 跨组件的通信（通过中间组件传递Props和Emits）
- 场景描述：在某些复杂的场景中，组件之间的通信可能不是直接的父子关系，而是需要通过一个或多个中间组件来传递信息。
- 实现方式：可以通过多个层次的props和emits来实现跨组件的通信。每个中间组件都充当数据或事件的传递者，将信息从源组件传递到目标组件。这种方法虽然可以实现跨组件通信，但会增加代码的复杂性和维护成本。因此，在实际开发中，通常会优先考虑使用Vuex等状态管理库或provide/inject等更高级的通信机制来简化跨组件通信。
以下是对前面提到的六种使用props和emits实现组件通信方式的详细解释及demo：
1. 父组件向子组件传递数据（Props）
解释：
父组件通过属性（attributes）将数据传递给子组件，子组件通过props选项来接收这些数据。这是Vue组件间通信最基本的方式。
Demo：
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from Parent Component!'
};
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
};
</script>
2. 子组件向父组件发送事件（Emits）
解释：
子组件通过this.$emit方法触发事件，并可以传递数据作为事件的参数。父组件通过监听子组件的自定义事件来接收这些通知和数据。
Demo：
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent @childClicked="handleChildClick" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
handleChildClick(message) {
console.log(message); // 输出 'Hello from Child Component!'
}
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<button @click="notifyParent">Click me</button>
</div>
</template>
<script>
export default {
methods: {
notifyParent() {
this.$emit('childClicked', 'Hello from Child Component!');
}
}
};
</script>
3. 父子组件之间的双向数据绑定（v-model）
解释：
Vue提供了v-model指令来实现表单输入元素的双向数据绑定。对于自定义组件，可以通过接受一个名为modelValue的prop和触发一个名为update:modelValue的事件来实现双向绑定。
Demo：
<!-- ParentComponent.vue -->
<template>
<div>
<CustomInput v-model="inputValue" />
</div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
components: { CustomInput },
data() {
return {
inputValue: ''
};
}
};
</script>
<!-- CustomInput.vue -->
<template>
<div>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</div>
</template>
<script>
export default {
props: {
modelValue: {
type: String,
default: ''
}
}
};
</script>
注意：在Vue 3中，推荐使用v-model:xxx语法和对应的update:xxx事件来实现自定义组件的双向绑定。
4. 父组件控制子组件的行为（通过Props传递函数或对象）
解释： 父组件可以通过props将函数或对象传递给子组件，子组件调用这些函数或访问这些对象来改变自己的行为。
Demo：
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent :action="parentAction" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
parentAction() {
console.log('Action called from parent!');
}
},
data() {
return {
parentAction: this.parentAction
};
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<button @click="callParentAction">Call Parent Action</button>
</div>
</template>
<script>
export default {
props: {
action: {
type: Function,
required: true
}
},
methods: {
callParentAction() {
this.action();
}
}
};
</script>
5. 子组件的初始化数据和配置（通过Props传递配置对象）
解释： 父组件可以通过props将一个包含所需数据和配置的对象传递给子组件，子组件在接收到这个对象后，根据其中的信息来初始化自己的状态或配置其行为。
Demo：
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent :config="childConfig" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
childConfig: {
title: 'Child Component Title',
showButton: true
}
};
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<h2>{{ config.title }}</h2>
<button v-if="config.showButton" @click="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
props: {
config: {
type: Object,
required: true,
default: () => ({})
}
},
methods: {
handleClick() {
console.log('Button clicked in child component!');
}
}
};
</script>
6. 跨组件的通信（通过中间组件传递Props和Emits）
解释： 在某些复杂的场景中，组件之间的通信可能不是直接的父子关系，而是需要通过一个或多个中间组件来传递信息。可以通过多个层次的props和emits来实现跨组件的通信。
Demo（简化示例，仅展示概念）：
<!-- GrandparentComponent.vue -->
<template>
<div>
<ParentComponent @eventFromChild="handleEventFromChild" />
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: { ParentComponent },
methods: {
handleEventFromChild(message) {
console.log('Message from child via parent:', message);
}
}
};
</script>
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent @childEvent="relayEventToGrandparent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
relayEventToGrandparent(message) {
this.$emit('eventFromChild', message);
}
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<button @click="triggerEvent">Trigger Event</button>
</div>
</template>
<script>
export default {
methods: {
triggerEvent() {
this.$emit('childEvent', 'Hello from Child Component!');
}
}
};
</script>
在这个示例中，ChildComponent触发一个事件，该事件被ParentComponent监听并重新触发为另一个事件，最后由GrandparentComponent监听并处理。这种方式实现了跨组件的通信，但增加了代码的复杂性和维护成本。在实际开发中，通常会优先考虑使用Vuex等状态管理库来简化跨组件通信。
