Vue.js props 子组件可以从父组件接收数据（通过 props）并可以向父组件发送事件（通过 $emit）

父子组件之间可以通过事件和 props 进行通信，但通常是单向的：父组件向子组件传递数据（props），子组件向父组件发送事件（$emit）。

方式

父组件传递数据给子组件:
- 使用 props。
子组件通知父组件:
- 使用 $emit 发送事件。

示例

父组件:

Vue.component('parent', {data() {return {message: 'Hello from Parent!'};},template: `<child @child-event="handleChildEvent" :message="message"></child>`,methods: {handleChildEvent(data) {console.log(data); // 处理子组件传来的数据}}
});

子组件:

Vue.component('child', {props: ['message'],template: `<div><p>{{ message }}</p><button @click="notifyParent">Notify Parent</button></div>`,methods: {notifyParent() {this.$emit('child-event', 'Message from Child!');}}
});

下面是一个简单的 Vue.js 示例，展示父子组件之间的交互：

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>父子组件示例</title>
</head>
<body><div id="app"><parent-component></parent-component>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>// 子组件Vue.component('child-component', {props: ['message'],template: `<div><p>子组件消息: {{ message }}</p><button @click="notifyParent">通知父组件</button></div>`,methods: {notifyParent() {this.$emit('child-event', '来自子组件的消息！');}}});// 父组件Vue.component('parent-component', {data() {return {parentMessage: '来自父组件的消息！'};},template: `<div><h1>父组件</h1><child-component :message="parentMessage" @child-event="handleChildEvent"></child-component></div>`,methods: {handleChildEvent(data) {alert(data); // 弹出子组件发送的消息}}});// 创建 Vue 实例new Vue({el: '#app'});
</script></body>
</html>