用vue2写一个父子组件相互传值

在Vue2中，父子组件之间的传值可以通过props和$emit来实现。下面是一个例子：

父组件代码：

<template>
  <div>
    <p>父组件：{{ parentData }}</p>
    <ChildComponent :childData="parentData" @childEvent="handleChildEvent"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello'
    }
  },
  methods: {
    handleChildEvent(data) {
      console.log('子组件传递的数据：', data);
      this.parentData = data; // 更新父组件的数据
    }
  }
}
</script>

子组件代码：

<template>
  <div>
    <p>子组件：{{ childData }}</p>
    <button @click="handleClick">点击传递数据给父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: String
  },
  methods: {
    handleClick() {
      const newData = 'World';
      this.$emit('childEvent', newData); // 触发自定义事件，并传递数据给父组件
    }
  }
}
</script>

在上述示例中，父组件通过props传递了一个名为`parentData`的数据给子组件，子组件可以通过`childData`来接收这个数据。子组件中的按钮点击事件触发后，通过`this.$emit`来触发一个名为`childEvent`的自定义事件，并将数据传递给父组件。父组件通过监听子组件的`childEvent`事件来接收子组件传递的数据，并更新父组件的数据。

这样，父子组件之间就可以实现相互传值了。