Vue-父子组件的通信
在 Vue.js 中，父子组件之间的通信可以通过 props 和 events 来实现。下面分别介绍了 props 和 events 的用法：
使用 Props（父传子）：
- 父组件可以通过 props 向子组件传递数据。
- 在子组件中，props 是响应式的，即当父组件的数据发生变化时，子组件会自动更新。
- 父组件通过在子组件上使用属性绑定的方式传递数据。
父组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from Parent',
};
},
components: {
ChildComponent,
},
};
</script>
|
子组件：
1
2
3
4
5
6
7
8
9
| <template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message'],
};
</script>
|
使用 Events（子传父）：
- 子组件可以通过 events 向父组件发送消息。
- 在子组件中使用
$emit 方法触发一个自定义事件，并传递数据。
- 父组件通过在子组件上监听自定义事件来接收子组件发送的消息。
父组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<ChildComponent @child-event="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
methods: {
handleChildEvent(data) {
console.log('Received data from child:', data);
},
},
components: {
ChildComponent,
},
};
</script>
|
子组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<button @click="sendMessage">Send Message to Parent</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('child-event', 'Hello from Child');
},
},
};
</script>
|
通过 props 和 events，父子组件之间可以方便地进行通信，实现数据的传递和交互。
