1.父向子进行传值
在父组件中，使用子组件的标签，并通过属性将数据传递给子组件。
在子组件中，定义props选项来接收父组件传递的数据。
父组件的数据会通过props选项传递给子组件，子组件可以直接使用这些数据。
父组件：
<template>
<div>
<child-component :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent component',
};
},
components: {
ChildComponent,
},
};
</script>子组件:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
},
},
};
</script>在上面的例子中，父组件通过属性:message将数据parentMessage传递给了子组件。子组件通过props选项定义了一个名为message的属性，接收父组件传递过来的数据，并在模板中进行展示。
2.子向父传值
在子组件中，通过$emit方法触发一个自定义事件，并传递要传递给父组件的数据。
在父组件中，通过v-on指令监听子组件触发的事件，并在触发时执行相应的方法，获取传递的数据。
子组件:
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child component');
},
},
};
</script>父组件：
<template>
<div>
<child-component @message-sent="handleMessage" />
<p>{
{ receivedMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
receivedMessage: '',
};
},
components: {
ChildComponent,
},
methods: {
handleMessage(message) {
this.receivedMessage = message;
},
},
};
</script>
