vue2组件之间传值方式

1、Props 和 $emit

• Props：父组件通过属性（Props）向子组件传递数据。
• $emit：子组件通过自定义事件向父组件发送消息。

<!-- 父组件 -->
<template>
  <ChildCom :message="parentMessage" @child-event="handleChild" />
</template>

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

export default {
  components: {
    ChildCom
  },
  data() {
    return {
      parentMessage: 'Hello'
    };
  },
  methods: {
    handleChild(data) {
      console.log(data,"---");
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>来自父组件的数据: {{ message }}</p>
    <button @click="sendMessage">点击发送到父组件</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('child-event', '发送数据');
    }
  }
};
</script>

2、$refs

• 使用 $refs 可以直接访问子组件的方法和数据。

<!-- 父组件 -->
<template>
  <ChildCom ref="child" />
  <button @click="accessChild">获取</button>
</template>

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

export default {
  components: {
    ChildCom
  },
  methods: {
    accessChild() {
      this.$refs.child.someMethod();
    }
  }
};
</script>

3、parent和children

• $parent：允许子组件访问父组件的实例。
• $children：允许父组件访问子组件的实例数组。

<!-- 父组件 -->
<template>
  <ChildCom />
</template>

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

export default {
  components: {
    ChildCom
  },
  mounted() {
    this.$children[0].someMethod();
  }
};
</script>

<!-- 子组件 -->
<script>
export default {
  mounted() {
    this.$parent.someMethod();
  }
};
</script>

4、Provide 和 Inject

• provide：允许祖先组件向所有后代组件提供数据。
• inject：允许后代组件接收祖先组件提供的数据。

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      ancestorData: '祖先存放的数据'
    };
  }
};
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['ancestorData'],
  mounted() {
    console.log(this.ancestorData); // '祖先存放的数据'
  }
};
</script>

5、Event Bus

• Event Bus 是一个 Vue 实例，用于作为中央事件总线，允许任意组件之间的通信。

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

<!-- 组件 A -->
<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', '来自A组件的数据');
    }
  }
};
</script>

<!-- 组件 B -->
<script>
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('message', (data) => {
      console.log('组件B接收:', data);
    });
  }
};
</script>

6、Vuex

• Vuex 是一个状态管理库，用于在大型应用中管理共享状态。