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>