$emit 和 props 是 Vue.js 框架中两个非常重要的概念，它们用于组件之间的通信。
$emit
$emit 是 Vue 实例的一个方法，用于触发一个自定义事件。通常，我们在子组件中使用 $emit 来向父组件发送消息或通知。
使用场景：
- 子组件内部发生了一些变化或用户执行了某些操作，需要通知父组件。
示例：
假设我们有一个按钮组件 MyButton，当按钮被点击时，我们希望通知父组件：
<template>
<button @click="handleClick">点击我</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('clicked');
}
}
}
</script>
在父组件中，我们可以监听这个 clicked 事件：
<template>
<MyButton @clicked="handleButtonClick"></MyButton>
</template>
<script>
import MyButton from './MyButton.vue';
export default {
components: {
MyButton
},
methods: {
handleButtonClick() {
console.log('按钮被点击了！');
}
}
}
</script>
props
props是 Vue 组件之间传递数据的一种方式。父组件可以通过 props 向子组件传递数据。
使用场景：
- 父组件需要向子组件传递一些配置信息或初始数据。
示例：
假设我们有一个显示文本的组件 MyText，父组件希望传递一个 message 给它：
子组件 MyText.vue：
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
父组件:
<template>
<MyText :message="myMessage"></MyText>
</template>
<script>
import MyText from './MyText.vue';
export default {
components: {
MyText
},
data() {
return {
myMessage: 'Hello, Vue!'
};
}
}
</script>
在上面的示例中，父组件通过 myMessage 数据属性向子组件 MyText 传递了一个字符串。子组件通过定义 props 来接收这个数据，并在模板中显示它。
总结
$emit用于子组件向父组件发送消息或通知。props用于父组件向子组件传递数据。
这两个机制共同构成了 Vue 组件间通信的基础，使得组件可以更加灵活和可复用。
