vue子组件给父组件中的属性赋值

在 Vue 中，子组件不能直接修改父组件的属性。这是因为 Vue 的数据流是单向的，只能从父组件向子组件传递数据，反过来是不行的。如果子组件想要修改父组件的属性，需要通过事件来通知父组件进行修改。

具体做法如下：

1. 在子组件中触发一个事件，把要修改的值当做参数传递出去。

// 子组件
<template>
  <button @click="updateValue">点击修改父组件的属性</button>
</template>

<script>
export default {
  methods: {
    updateValue() {
      this.$emit('update:value', '新的值') // 触发 update:value 事件，把新的值传递给父组件
    }
  }
}
</script>

2. 在父组件中监听子组件触发的事件，在事件处理函数中修改父组件的属性。

// 父组件
<template>
  <div>
    <p>{{ value }}</p>
    <child-component @update:value="updateValue"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: '原始值'
    }
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue // 修改父组件的属性
    }
  }
}
</script>

这样，当子组件中触发了 update:value 事件时，父组件中的 updateValue 方法就会被调用，从而修改了父组件的 value 属性。