vue2 子组件给父组件传值

Vue 2 中，子组件想要向父组件传递数据，通常有两种方式：

1. **prop (属性传递)**[^1]:
- Prop 是从父组件向子组件单向的数据传递机制，子组件不能直接修改父组件的数据，只能接受。

   <!-- 子组件 -->
   <template>
     <button @click="selectArticle(index)">选择文章</button>
   </template>

   <script>
   export default {
     methods: {
       selectArticle(index) {
         this.$emit('selected', index); // 触发自定义事件并传递索引
       }
     }
   };
   </script>
   
   <!-- 父组件 -->
   <template>
     <article-component v-for="(article, index) in articles" :key="index"></article-component>
     <div>已选文章索引: {{ selectedIndex }}</div>
   </template>

   <script>
   import ArticleComponent from './ArticleComponent.vue';
   export default {
     components: { ArticleComponent },
     data() {
       return {
         articles: [...], // 父组件的数据
         selectedIndex: null,
       };
     },
     methods: {
       handleSelected(index) {
         this.selectedIndex = index; // 接收并处理来自子组件的数据
       },
     },
   };
   </script>

2. **$emit (自定义事件发射)**:
- 子组件通过 `$emit` 发射一个自定义事件，如 `selected`，并将数据传递给父组件，父组件可以通过 `v-on` 监听这个事件来响应。

这两种方式组合使用，允许子组件与父组件保持良好的解耦，并实现双向通信，但实际应用中可能还需要配合Vuex或自定义指令来管理复杂状态。