vue父组件点击 修改子组件的值

可以通过以下方式实现：

1. 在父组件中定义一个数据属性，用于存储子组件的值，例如：`parentData`。

2. 在父组件的模板中，使用子组件，并将 `parentData` 通过 `props` 传递给子组件。

3. 在子组件中，接收父组件传递的 `props`，并将其绑定到子组件中需要修改的值上，例如：`childData`。

4. 在父组件中，定义一个方法，用于修改 `parentData` 的值。

5. 在父组件的模板中，使用按钮或其他交互元素，触发修改 `parentData` 的方法。

6. 在子组件中，通过 `$emit` 把修改后的值传递给父组件。

下面是一个示例代码：

<template>
  <div>
    <child-component :childData="parentData" @change="handleChildChange"></child-component>
    <button @click="changeParentData">修改父组件的值</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: '父组件的值',
    };
  },
  methods: {
    changeParentData() {
      this.parentData = '修改后的父组件的值';
    },
    handleChildChange(value) {
      this.parentData = value;
    },
  },
};
</script>

<template>
  <div>
    <p>子组件的值：{{ childData }}</p>
    <input type="text" v-model="childData">
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true,
    },
  },
  methods: {
    handleChange() {
      this.$emit('change', this.childData);
    },
  },
  watch: {
    childData() {
      this.handleChange();
    },
  },
};
</script>

在上面的代码中，父组件传递 `parentData` 给子组件，并将子组件的值绑定到 `childData` 上。父组件定义了 `changeParentData` 方法，用于修改 `parentData` 的值。子组件通过 `$emit` 把修改后的值传递给父组件，父组件在 `handleChildChange` 方法中更新 `parentData` 的值。