当先锋百科网

首页 1 2 3 4 5 6 7

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的值,从而实现了父子组件之间的双向通信。