如何在Vue中设置另一个组件内的数据值

// 父组件
<template>
  <div>
    <child-component :childData="parentData"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: 'Hello from parent component'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ childData }}</p>
  </div>
</template>

<script>
export default {
  props: ['childData']
}
</script>

// 子组件
<template>
  <div>
    <button @click="updateParentData">Update Parent Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateParentData() {
      this.$emit('update', 'New data from child component');
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component :childData="parentData" @update="updateParentData"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: 'Hello from parent component'
    }
  },
  methods: {
    updateParentData(newData) {
      this.parentData = newData;
    }
  }
}
</script>