Vue:从一个组件到另一个组件更新数据

// Parent.vue
<template>
  <div>
    <Child :message="data" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'Hello Vue!'
    }
  }
}
</script>

// Child.vue
<template>
  <div>
    {{ message }}
  </div>
</template>

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

// Parent.vue
<template>
  <div>
    <Child @update="handleUpdate" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    }
  },
  methods: {
    handleUpdate(message) {
      this.data = message
    }
  }
}
</script>

// Child.vue
<template>
  <div>
    <button @click="handleClick">Update</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('update', 'Hello Vue!')
    }
  }
}
</script>