一、props/$emit父子组件传值：
父传子 (自定义属性 props)
父组件向子组件传参，通过自定义属性的方式进行传参，在子组件中使用prop定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上，那在子组件中props里面的自定义属性可以直接使用。
//父组件代码 渲染子组件
<Son :name="name" />
// 子组件代码，接受父参数
export default {
props: {
name:{
type:String,
default:"我是默认字符串"//定义参数默认值
required:false//定义参数是否必须值
}
}
}
子传父 (自定义事件 this.$emit)
子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。
// 父组件代码，渲染子组件
<Son @setValue="valueFn" />
export default{
method:{
valueFn(value) {}
}
}
// 子组件代码
this.$emit('setValue', this.say)
二、ref与parent/children父子组件传值:
父传子
//父组件
<Home ref="home"></Home>
<button @click="toValue">点击</button>
methods:{
toValue(){
this.msg = "这是父组件的值";
this.$refs.home.setMsg(this.msg);
}
}
//子组件
<div class="home">
{{msg}}
</div>
methods:{
setMsg(val){
this.msg = val;
}
}
子传父（如果子组件是公共组件，需判断父组件是否具有该方法）
//父组件
<Home ref="home"></Home>
methods:{
toValue(val){
this.msg = val
}
}
//子组件
<div class="home">
<button @click="setMsg">点击</button>
</div>
methods:{
setMsg(val){
this.$parent.toValue(this.msg);
}
}
三、兄弟之间传参
兄弟组件之间的数据传递，通过eventBus来做中间的桥梁，传输方通过中间组件调用 emit 传数据，接收方通过on 接受数据，两者之间的自定义属性名保持一致。
// 传输方组件调用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);
// 接收方接受参数
import Bus from '@/EventBus.js'
created() {
Bus.$on('pass-value', val => {
this.sibilingValue = val;
})
}
四 $attrs/$listeners隔代组件传值（爷孙组件参数互传）
- $attrs
1.包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外);
2.当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。 - $listeners
1.包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
2.它可以通过 v-on=“$listeners” 传入内部组件。 - 简单来说：$attrs 与$listeners是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners 里存放的是父组件中绑定的非原生事件。
爷传孙（$attrs）
//爷组件
<div id="app">
<Home :msg="msg"></Home>
</div>
//父组件(父组件的操作最简单，但不做就会传不过去)
<div class="home">
<Sun v-bind="$attrs"></Sun>
</div>
//孙组件
<div class="sun">
{{ msg }}
</div>
//props直接接受
props:{ msg:String, }
孙传爷（$listeners）
//爷组件
<div id="app">
<Home @setVal="setVal">></Home>
</div>
methods:{ setVal(val){ this.msg = val; } }
//父组件(父组件的操作最简单，但不做就会传不过去)
<div class="home">
<Sun v-on="$listeners"></Sun>
</div>
//孙组件
<div class="sun">
<button @click="toVal">点我</button>
</div>
methods:{ toVal(){ this.$emit("setVal",this.msg) } }
五、通过Vuex数据共享
通过Vuex存储数据， Vuex是一个专为vue.js 应用程序开发的状态管理模式， 它采用集中式存储管理数据，以相应的规则保证状态以一种可预测的方式发生改变， 一变全变，同步更新数据。文章来源：https://www.toymoban.com/news/detail-400643.html
// 注册代码
const store = new Vue.Store({
state:{
count: 100
},
mutations: {
addCount(state, val = 1) {
state.count += val;
}，
subCount(state, val = 1) {
state.count -= val;
}
}
})
// 组件调用
this.$store.commit('addCount'); // 加 1
this.$store.commit('subCount'); // 减 1文章来源地址https://www.toymoban.com/news/detail-400643.html
到了这里，关于vue组件之间的五种传值方法(父子\兄弟\跨组件)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
