vue2子组件给父组件传值

在Vue2中，子组件向父组件传递数据通常通过props进行。props是父组件向子组件单向地、不可变地传递数据的一种机制。子组件需要将想要暴露给父组件的数据设置为props，并在`<template>`标签内通过`v-bind:key="value"`或简写`:`的形式传递。

例如，在子组件中：

<!-- 子组件 -->
<template>
  <button @click="sendData">点击发送</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('update:parentData', '从子组件传来的新值');
    }
  }
}
</script>

在父组件模板里接收并处理这个值：

<!-- 父组件 -->
<template>
  <div>
    <child-component :parentData="receivedValue" @update:parentData="handleUpdate"></child-component>
    <p>接收到的值: {{ receivedValue }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      receivedValue: '',
    };
  },
  methods: {
    handleUpdate(value) {
      this.receivedValue = value;
    }
  }
};
</script>

在这个例子中，当子组件中的按钮被点击时，会触发`sendData`方法，它会触发`update:parentData`自定义事件，并传递新值。父组件监听到这个事件后，更新`receivedValue`的状态。