Emit和Prop是Vue.js的核心模块,用于让组件之间进行通信。
在Vue.js中,父子组件之间的通信是基于"props down, events up"的原则实现的。即父组件通过props向下传递数据,子组件通过emit事件向上通知父组件发生了某些行为。
例如,父组件向子组件传递一个名为"message"的prop,子组件将这个prop渲染为一个文本内容并显示在页面中。当用户在子组件中进行操作时,子组件会emit一个名为"update"的事件,父组件监听到该事件后,将更新子组件所展示的数据。
// 子组件 <template> <div> {{ message }} <button @click="update">更新消息</button> </div> </template> <script> export default { props: ["message"], methods: { update() { this.$emit("update"); } } }; </script> // 父组件 <template> <div> <ChildComponent :message="message" @update="handleUpdate" /> </div> </template> <script> import ChildComponent from "./ChildComponent"; export default { components: { ChildComponent }, data() { return { message: "Hello, world!" }; }, methods: { handleUpdate() { this.message = "Updated message"; } } }; </script>
在上面的代码中,子组件通过props传递了一个名为message的数据给父组件,父组件在渲染子组件时通过事件监听的方式监听到了"update"事件,并在其回调函数中更新了message的值,从而实现了父子组件之间的双向通信。