Vue 子父组件传值：使用 props 实现数据传递

在 Vue 中，子组件可以通过 props 属性接收父组件传递过来的值。\n\n父组件可以通过子组件的标签属性来传递值，子组件通过 props 属性接收父组件传递过来的值。\n\n以下是一个示例：\n\nhtml\n<!-- 父组件 -->\n<template>\n <div>\n <ChildComponent :message="message" />\n </div>\n</template>\n\n<script>\nimport ChildComponent from './ChildComponent.vue';\n\nexport default {\n data() {\n return {\n message: 'Hello World'\n }\n },\n components: {\n ChildComponent\n }\n}\n</script>\n\n\n<!-- 子组件 -->\n<template>\n <div>\n <p>{{ message }}</p>\n </div>\n</template>\n\n<script>\n export default {\n props: ['message']\n}\n</script>\n\n\n在上述示例中，父组件通过:message="message"将 message 的值传递给子组件的 message 属性。子组件通过 props 属性接收父组件传递过来的 message 值，并在模板中进行渲染。\n\n需要注意的是，父组件传递给子组件的值是单向的，即父组件的值改变时，子组件的值也会相应改变，但是子组件的值改变时，父组件的值不会受到影响。如果需要子组件改变父组件的值，可以通过在子组件中触发事件，父组件监听该事件并相应改变值。