vue3父组件点击传子组件

在Vue3中，父组件可以通过props属性将数据传递给子组件。具体操作如下：

1. 首先，在父组件中定义需要传递的数据，可以通过props属性指定数据的名称和类型。例如，假设我们要将标题传递给子组件，可以在父组件的模板中添加以下代码：

   <template>
     <div>
       <button @click="handleClick">点击传递数据给子组件</button>
       <ChildComponent :title="title" />
     </div>
   </template>

2. 在父组件的脚本部分，定义需要传递的数据。例如，我们定义一个标题变量：

   <script>
   export default {
     data() {
       return {
         title: "我是标题(来自父组件)"
       };
     },
     methods: {
       handleClick() {
         // 可以在此处改变title的值
         this.title = "新的标题";
       }
     }
   };
   </script>

3. 在子组件中，使用props属性接收父组件传递的数据。例如，我们在子组件的模板中添加以下代码：

   <template>
     <div>
       <h2>{{ title }}</h2>
     </div>
   </template>

4. 在子组件的脚本部分，添加props属性，指定接收的数据类型和名称。例如：

   <script>
   export default {
     props: {
       title: String
     }
   };
   </script>

这样，当父组件的按钮被点击时，父组件的标题数据就会传递给子组件，并在子组件中显示出来。可以通过修改父组件的数据来动态改变子组件的显示内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue3 - 组件通信（子传父）](https://blog.csdn.net/weixin_44198965/article/details/127875451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3 - 组件通信（父传子）](https://blog.csdn.net/weixin_44198965/article/details/127875160)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]