【Vue】$emits和props

$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 组件间通信的基础，使得组件可以更加灵活和可复用。