用props向子组件传递父组件数据

在Vue.js中，你可以通过`props`属性将数据从父组件（Parent Component）传递给子组件（Child Component）。这里是一个基本步骤指南：

1. **在父组件中定义prop**：
在父组件的`data()`函数中创建你想要传递的数据，并在`components`选项中注册子组件时，在`props`属性中指定这个数据名及其特性（例如：类型、默认值等）：

   export default {
     data() {
       return {
         message: 'Hello from parent'
       }
     },
     components: {
       MyChildComponent: { props: { message: String } } // 声明message prop
     }
   }

2. **在模板中传递prop**：
在父组件的模板中，使用`v-bind`或冒号(`:`)语法将数据绑定到子组件的prop上：

   <template>
     <div>
       <my-child-component :message="message"></my-child-component> <!-- 或者 v-bind:message -->
     </div>
   </template>

3. **子组件接收和显示prop**：
子组件可以在`mounted()`生命周期钩子中访问到父组件传递过来的`message` prop，并在模板中展示它：

   <script>
   import { ref } from "vue";
   export default {
     props: ['message'],
     mounted() {
       console.log(this.message); // 输出：Hello from parent
     },
     template: `<p>{{ message }}</p>`
   };
   </script>

通过这种方式，当父组件的数据发生变化时，由于Vue的响应式系统，子组件会自动更新显示的新值。