vue子组件取父组件数据

在Vue.js中，子组件想要获取父组件的数据通常有两种方式：

1. **props** (属性)：父组件通过`props`向下传递数据给子组件。子组件需要在模板上声明它想接收的属性，并在父组件内部设置该属性的值。例如：

   <template>
     <child-component :parentData="parentValue" />
   </template>

   <script>
   export default {
     data() {
       return {
         parentValue: '这是来自父组件的数据'
       }
     }
   }
   </script>

子组件 `<child-component>` 可以这样访问：

   <template>
     {{ parentData }}
   </template>

2. **自定义事件（$emit）+ $on**：子组件通过`$emit`触发自定义事件，将数据发送给父组件，然后父组件通过`$on`监听这个事件并处理数据。这种方式常用于单向数据流，避免直接修改父组件状态：

   <template>
     <button @click="sendDataToParent">点击发送</button>
   </template>

   <script>
   export default {
     methods: {
       sendDataToParent() {
         this.$emit('parentEvent', '这是从子组件发来的数据');
       }
     }
   }
   </script>

父组件：

   <template>
     <child-component @parentEvent="handleChildData"></child-component>
   </template>

   <script>
   methods: {
     handleChildData(data) {
       console.log('接收到子组件的数据:', data);
     }
   }
   </script>