vue 父组件改变子组件的值

在Vue中，父组件可以通过props向子组件传递数据，但是子组件不能直接修改props中的值。如果需要修改props中的值，可以通过在子组件中定义一个与props同名的data属性，并在子组件中使用计算属性或者watch监听props的变化，从而实现父组件改变子组件的值。

以下是一个简单的示例代码：

父组件：

<template>
  <div>
    <button @click="changeChildValue">改变子组件的值</button>
    <ChildComponent :child-value="parentValue"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '父组件的值'
    }
  },  methods: {
    changeChildValue() {
      this.parentValue = '改变后的父组件的值'
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>子组件的值：{{ childValue }}</p>
  </div>
</template>

<script>
export default {
  props: {
    childValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      childData: ''
    }
  },
  computed: {
    // 监听props的变化，将props的值赋给子组件的data属性
    childValueComputed: {
      get() {
        return this.childValue
      },
      set(val) {
        this.$emit('update:childValue', val)
      }
    }
  },
  watch: {
    // 监听props的变化，将props的值赋给子组件的data属性
    childValue(val) {
      this.childData = val
    }
  }
}
</script>

在子组件中，我们定义了一个与props同名的data属性childValue，并使用computed监听props的变化，将props的值赋给子组件的data属性。同时，我们还使用了$emit方法向父组件发送一个update事件，从而实现父组件改变子组件的值。

在父组件中，我们通过v-bind指令将父组件的值parentValue传递给子组件的props属性childValue，并在点击按钮时改变父组件的值，从而触发子组件的更新。