vue 组件之间相互传值的6种方法

在Vue.js中，组件间的数据传递有多种方法，以下是六种常见的方法：

1. 使用props和$emit。
2. 使用$parent和$children。
3. 使用Vue.observable或Vuex。
4. 使用provide和inject。
5. 使用EventBus进行跨组件通信。
6. 使用slot和slot-scope。

以下是每种方法的简单示例：

1. 使用props和$emit:

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :childData="parentData" @child-event="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'some data'
    };
  },
  methods: {
    handleChildEvent(payload) {
      // Handle the event
    }
  }
};
</script>
 
<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent">Send to Parent</button>
</template>
<script>
export default {
  props: ['childData'],
  methods: {
    emitEvent() {
      this.$emit('child-event', 'data from child');
    }
  }
};
</script>

2. 使用$parent和$children:

<!-- ChildComponent.vue -->
<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
  methods: {
    sendToParent() {
      this.$parent.parentData = 'data from child';
    }
  }
};
</script>

3. 使用Vue.observable或Vuex:

// Store.js
import Vue from 'vue';
export const store = Vue.observable({
  data: ''
});
 
// ComponentA.vue
<template>
  <button @click="sendToStore">Send to Store</button>
</template>
<script>
import { store } from './Store';
 
export default {
  methods: {
    sendToStore() {
      store.data = 'data from A';
    }
  }
};
</script>
 
// ComponentB.vue
<template>
  <div>{{ store.data }}</div>
</template>
<script>
import { store } from './Store';
 
export default {
  computed: {
    dataFromStore() {
      return store.data;
    }
  }
};
</script>

4. 使用provide和inject:

<!-- GrandParentComponent.vue -->
<template>
  <ParentComponent />
</template>
<script>
import ParentComponent from './ParentComponent.vue';
 
export default {
  provide: {
    grandParentData: 'data from grandParent'
  },
  components: {
    ParentComponent
  }
};
</script>
 
<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  provide: {
    parentData: 'data from parent'
  },
  components: {
    ChildComponent
  }
};
</script>
 
<!-- ChildComponent.vue -->
<template>