这篇文章给大家分享的是有关vue中怎么实现组件传值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司是一家专业提供阳泉企业网站建设,专注与做网站、网站制作、HTML5、小程序制作等业务。10年已为阳泉众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
vue组件传值的方法：1、父向子传值使用props；2、子向父传值使用“$emit”；3、使用EventBus或Vuex进行兄弟传值；4、使用“provide/inject”或“$attrs/$listeners”方法进行跨级传值。
本教程操作环境：windows7系统、vue2.9.6版、Dell G3电脑。
我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。
一、父组件向子组件传值
即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。
在父组件的子组件标签中绑定自定义属性
// 父组件
export default {
components: {
UserDetail
}
......
}
在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。
// 子组件
export default {
props: ['myName']
}
/*
props: { myName: String } //这样指定传入的类型，如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: {
childMsg: {
type: Array,
default: () => []
}
} // default指定默认值
如果 props 验证失败，会在控制台发出一个警告。
*/
子组件接收的父组件的值分为引用类型和普通类型两种：
普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
引用类型：数组（Array）、对象（Object）
基于 vue 的单向数据流，即组件之间的数据是单向流通的，子组件是不允许直接对父组件传来的值进行修改的，所以应该避免这种直接修改父组件传过来的值的操作，否则控制台会报错。
如果传过来的值是简单数据类型，是可以在子组件中修改，也不会影响其他兄弟组件内同样调用了来自该父组件的值。
具体操作是可以先把传过来的值重新赋值给data中的一个变量，然后再更改那个变量。
// 子组件
export default {
props: ['myName'],
data() {
return {
name : this.myName // 把传过来的值赋值给新的变量
}
},
watch: {
myName(newVal) {
this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
}
},
methods: {
changeName() {
this.name = 'Lily' // 这里修改的只是自己内部的值，就不会报错了
},
}
}注：如果不使用 watch 来监听父组件传递的 myName 值，子组件中的 name 值是不会随着父组件的 myName 值进行改变，因为 data 中 name: this.myName 仅仅只是定义了一个初始值。
如果引用类型的值，当在子组件中修改后，父组件的也会修改，因其数据是公用的，其他同样引用了该值的子组件也会跟着被修改。可以理解成父组件传递给子组件的值，就相当于复制了一个副本，这个副本的指针还是指向父组件中的那个，即共享同一个引用。所以除非有特殊需要，否则不要轻易修改。
二、子组件向父组件传值
1、子组件绑定一个事件，通过 this.$emit() 来触发
在子组件中绑定一个事件，并给这个事件定义一个函数
// 子组件
改变父组件的name
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
// 注：此处事件名称与父组件中绑定的事件名称要一致
}
}
}
在父组件中定义并绑定 handleChange 事件
// 父组件
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}
2、通过 callback 函数
先在父组件中定义一个callback函数，并把 callback 函数传过去
// 父组件
methods: {
callback: function(name) { this.name = name
}
}
在子组件中接收，并执行 callback 函数
// 子组件
改变父组件的name
props: {
callback: Function,
}
3、通过 $parent / $children 或 $refs 访问组件实例
这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。
// 子组件
export default {
data () {
return {
title: '子组件'
}
},
methods: {
sayHello () {
console.log('Hello');
}
}
}// 父组件
注：这种方式的组件通信不能跨级。
4. $attrs / $listeners 详解点这里
三、兄弟组件之间传值
1、还是通过 $emit 和 props 结合的方式
在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件
// 父组件
export default {
data() {
return {
name: 'John'
}
},
components: {
'child-a': ChildA,
'child-b': ChildB,
},
methods: {
editName(name) {
this.name = name
},
}
}
在子组件B中接收变量和绑定触发事件
// child-b 组件
姓名：{{ myName }}
修改姓名
// child-a 组件
姓名：{{ newName }}
即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。
2. 通过一个空 vue 实例
创建一个 EventBus.js 文件，并暴露一个 vue 实例
import Vue from 'Vue'export default new Vue()
在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数
(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)
在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: ''
}
},
created() {
EventBus.$on('editName', (name) => {
this.name = name
})
}
}这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。
3. 使用 vuex →点这里
四、多层父子组件通信
有时需要实现通信的两个组件不是直接的父子组件，而是祖父和孙子，或者是跨越了更多层级的父子组件，这种时候就不可能由子组件一级一级的向上传递参数，特别是在组件层级比较深，嵌套比较多的情况下，需要传递的事件和属性较多，会导致代码很混乱。
这时就需要用到 vue 提供的更高阶的方法：provide/inject。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。查 看 官 网
provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。
父组件：
export default {
provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
name: 'Jack'
}
}子组件：
export default {
inject: ['name'], // 注入了从父组件中提供的name变量
mounted () {
console.log(this.name); // Jack
}
}注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。
如果想要实现 provide 和 inject 数据响应，有两种方法：
// 父组件
修改姓名
后代组件中取值：
姓名：{{parentObj.name}}
注：这种方式在函数式组件中用的比较多。函数式组件，即无状态(没有响应式数据)，无实例化(没有 this 上下文)，内部也没有任何生命周期处理方法，所以渲染性能高，比较适合依赖外部数据传递而变化的组件。
感谢各位的阅读！关于“vue中怎么实现组件传值”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
