V2--组件之间的传值方式（8种）

Props属性传值

        父组件通过 props 将数据传递给子组件，子组件可以在自身的 props 选项中声明接收的属性，并使用这些属性来渲染内容

<!-- Parent.vue -->
<template>
  <Child :message="msg" />
</template>

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

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

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

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

$emit事件派发

        自定义事件，子组件可以通过 $emit 方法触发一个自定义事件，父组件通过在子组件上使用 v-on 或者 @ 指令来监听该事件

<!-- Parent.vue -->
<template>
  <Child @customEvent="handleCustomEvent" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Received payload:', payload);
    },
  },
};
</script>

<!-- Child.vue -->
<template>
  <button @click="emitEvent">Emit Event</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('customEvent', { data: 'Custom event payload' });
    },
  },
};
</script>

Vuex 状态管理

        Vuex是Vue的官方状态管理库，用于在组件之间共享和管理状态。组件可以通过 Vuex 的 state 和 getter 获取共享的数据，通过 mutations 和 actions 去修改数据

<!-- Parent.vue -->
<template>
  <div>{{ sharedState }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['sharedState']),
  },
};
</script>

<!-- Child.vue -->
<template>
  <button @click="updateSharedState">Update Shared State</button>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['updateSharedState']),
  },
};
</script>

$ref

        父组件可以通过  ref 属性获取子组件的引用。然后直接访问子组件的属性和方法

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      // 通过 $refs 访问子组件的方法
      this.$refs.childRef.childMethod();
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Child Component Content</p>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    },
  },
};
</script>

Provide/Inject 

        父组件可以使用 provide 来提供数据，子组件可以使用 inject 来注入父组件提供的数据。这种方法在跨多层嵌套组件传递数据时非常有用

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      sharedData: 'Data from parent',
    };
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ sharedData }}</div>
</template>

<script>
export default {
  inject: ['sharedData'],
};
</script>

EventBus

        创建一个空的Vue实例作为事件总线，通过它来发送和接收事件，从而实现组件之间的通信

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="emitEvent">Trigger Event</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    emitEvent() {
      EventBus.$emit('customEvent', 'Data from parent');
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ eventData }}</div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      eventData: '',
    };
  },
  created() {
    EventBus.$on('customEvent', data => {
      this.eventData = data;
    });
  },
};
</script>

$parent 和 $children 

        使用 $parent 可以访问父组件的属性和方法，但这种方法在组件结构变化可能不稳定，使用 $children 可以访问子组件数组，但同样不够稳定和可靠

        $parent

<template>
  <div>
    <p>Parent Component</p>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  mounted() {
    this.accessParentData();
  },
  methods: {
    accessParentData() {
      // 使用 $parent 访问父组件的数据和方法
      console.log(this.$parent.parentData);
    },
  },
  data() {
    return {
      parentData: 'Data from parent',
    };
  },
};
</script>

        $children 

<template>
  <div>
    <p>Parent Component</p>
    <child-component></child-component>
    <button @click="accessChildData">Access Child Data</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    accessChildData() {
      // 使用 $children 访问子组件的数据和方法
      console.log(this.$children[0].childData);
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: 'Data from child',
    };
  },
};
</script>

插槽Slots

        父组件可以通过插槽将内容传递给子组件。子组件可以在自身模版中使用插槽来显示父组件传递的内容

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <!-- 使用插槽将内容传递给子组件 -->
      <p slot="content">Content from parent</p>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Child Component</p>
    <!-- 在子组件中使用插槽来显示内容 -->
    <slot name="content"></slot>
  </div>
</template>