vue.js 组件数据传递

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

<!-- 子组件 -->
<template>
  <button @click="sendMessageToParent">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('messageSent', 'Hello from child');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @messageSent="handleMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message); // 'Hello from child'
    }
  }
};
</script>

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      sharedData: 'Shared data from ancestor'
    };
  }
};
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData); // 'Shared data from ancestor'
  }
};
</script>