vue中子组件如何修改父组件的属性值，写一个demo

可以使用Vue的自定义事件（$emit）来实现子组件修改父组件的属性值，具体步骤如下：

1. 在父组件中定义需要修改的属性值，并把它作为prop传递给子组件。

2. 在子组件中使用props来接收父组件传递的属性值。

3. 在子组件中定义一个方法，通过$emit触发一个自定义事件，并把需要修改的属性值作为参数传递。

4. 在父组件中监听该自定义事件，并在事件处理方法中修改属性值。

以下是一个示例代码：

父组件代码：

<template>
  <div>
    <p>父组件中的属性值：{{parentValue}}</p>
    <child-component :childValue="childValue" @on-change="handleChildChange"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '父组件的属性值',
      childValue: ''
    }
  },
  methods: {
    handleChildChange(value) {
      this.parentValue = value
    }
  }
}
</script>

子组件代码：

<template>
  <div>
    <input v-model="childValue" />
    <button @click="handleChange">修改父组件的属性值</button>
  </div>
</template>

<script>
export default {
  props: {
    childValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      newValue: '子组件中的新值'
    }
  },
  methods: {
    handleChange() {
      this.$emit('on-change', this.newValue)
    }
  }
}
</script>

在以上示例中，点击子组件中的“修改父组件的属性值”按钮后，就会触发一个名为“on-change”的自定义事件，并把子组件中定义的newValue作为参数传递给父组件的handleChildChange方法。最终，父组件的parentValue属性值也跟着改变了。