vue2中组件之间的传值方法汇总

---

前言

vue组件之间参数传递的方法，在实际项目中经常用到，现在总结一些常用的方法。方便大家后续开发中查看

---

一、provide和inject

provide 和 inject 主要用于高阶插件/组件库中的用法，并不推荐用于常规应用程序的代码。简单说就是用于类似父子组件、祖孙组件、或者跨越多层级组件之间的通讯。

代码示例

祖先组件（frame.vue）

export default {
data() {
    return {};
  },
  provide() {
    return { jumpToPage: this.jumpToPage, getParams: this.getParams };
  },
  methods: {
	jumpToPage(data = "", params = {}) {
      // 组件内需要跳转到某个tab页时调用此方法。传值data: 字符串，值为需要跳转的页面在上面<el-menu-item>中的index值。
      // 调用此方法的组件内需要在export default内配置 inject: ["jumpToPage"]，然后在需要调用的地方调用 this.jumpToPage()
      if (data) this.handleSelect(data); //如果有data，就执行这个函数
      if (params) {
        this.params = {};
        this.params = params;
        //this.getParams();
      }
    },
  }
}

后代组件（frame.vue）

export default {
	inject: ["jumpToPage"],
  	name: "contractDrafting",
  	title: "合同拟定",
  	data(){
  		return{}
  	},
  	methods: {
  		toAddContract() {
      	  this.jumpToPage("createContract");
    	},
  	},
}

二、$ refs和 $ parent

$refs

$refs 是一个对象，其中包含了所有带有 ref 属性的子组件或 DOM 元素。在组件渲染完成后，你可以通过 $refs 访问对应的子组件实例或 DOM 元素。这通常用于访问子组件的方法或属性，或者用于直接操作 DOM。

代码示例：

假设你有一个子组件 ChildComponent，你希望在父组件中访问它。

ChildComponent.vue

<template>  
  <div>我是子组件</div>  
</template>  
  
<script>  
export default {  
  name: 'ChildComponent',  
  methods: {  
    sayHello() {  
      console.log('Hello from ChildComponent!');  
    }  
  }  
}  
</script>

ParentComponent.vue

<template>  
  <div>  
    <child-component ref="childRef"></child-component>  
    <button @click="accessChild">访问子组件</button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    accessChild() {  
      // 通过 $refs 访问子组件实例  
      this.$refs.childRef.sayHello();  
    }  
  }  
}  
</script>

在这个例子中，我们通过在 ChildComponent 上设置 ref=“childRef”，然后在父组件的 accessChild 方法中通过 this.$refs.childRef 访问子组件实例，并调用其 sayHello 方法。

$parent

$parent 属性允许一个组件访问其直接父组件的实例。这在某些场景下很有用，但需要注意的是，过度使用 $parent 会使组件间的耦合度增加，导致代码难以维护。

代码示例：

ParentComponent.vue

<template>  
  <div>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from ParentComponent!'  
    }  
  }  
}  
</script>

ChildComponent.vue

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="showParentMessage">显示父组件消息</button>  
  </div>  
</template>  
  
<script>  
export default {  
  computed: {  
    message() {  
      // 这里使用 $parent 访问父组件的 data  
      return this.$parent.parentMessage;  
    }  
  },  
  methods: {  
    showParentMessage() {  
      alert(this.$parent.parentMessage);  
    }  
  }  
}  
</script>

在这个例子中，ChildComponent 通过 $parent 访问了其直接父组件 ParentComponent 的 parentMessage 数据。尽管这种方式可以实现功能，但通常推荐使用更明确和松耦合的方式（如事件总线、Vuex、Provide/Inject 等）来实现组件间的通信。

三、使用全局事件总线（Event Bus）

全局事件总线允许任意组件之间进行通信，通过创建一个空的Vue实例作为事件总线，组件可以通过它来触发和监听事件。

创建EventBus.js:

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

发送事件的组件:

<script>  
import { EventBus } from './EventBus.js';  
  
export default {  
  methods: {  
    sendData() {  
      EventBus.$emit('data-event', 'This is some data');  
    }  
  }  
}  
</script>

接收事件的组件:

<script>  
import { EventBus } from './EventBus.js';  
  
export default {  
  created() {  
    EventBus.$on('data-event', (data) => {  
      console.log(data); // This is some data  
    });  
  }  
}  
</script>

四、父子组件传参（Props和$emit）

父子组件传参在实际项目中用的最为普遍在之前的文章中也有写过，这里就不在多赘述了。
这是链接：Vue中父子组件如何传值

总结

比较常用的传值方法目前用的比较多熟练的就是这几种，实际项目中还有用到的后续将会更新哈