vue组件之间传值的几种方式

vue组件传值

父子组件之间传值。几种常见方式

第一种方式（父传子）

父组件

<m-child :childMsg="parentMsg"></m-child>
//在父组件中的子组件<m-child>上面绑定一个msg,此时已经把父组件的值绑定在子组件上
data(){return{//父组件的数据parentMsg:[]}
}

注意：数据绑定的时候记得加：如果后面的数据是字符串则不用加双引号如果实在要加：的时候写法 :msg=“‘i am item’” ,因为：msg 默认把后面的识别变量，所以后面记得在字符串里面单引号，直接msg默认是字符串，后面不用加

子组件（mChild）
通过子组件props属性继承父组件的值，在通过渲染模板渲染出来{{msg}}

<p>{{childMsg}}</p>
props:{childMsg:{type:String,  //类型可以定义default:''  //默认是空值// type:Object,  default () {return {}}}
}

第二种方法（子传父）

简单说明一下思路，虽然很绕但很好理解，多琢磨几次，
子传父通过事件方法来传值，首先在子组件定义一个方法，当方法执行的时候调用this.$emit('自定义的方法名'，'要给父组件的值')的方法来提交值，在通过父组件中的子组件通过v-on或者@来绑定刚才的方法，当这个方法执行的时候后面会触发另外一个方法，在这个方法中的第一个参数就是传过来的值，然后可以处理这个值

父组件

<p>{{msg}}</p>
//将父组件中的子组件标签绑定事件,@子给父的事件=父组件中的事件
<m-child @childFnGetParent="parentFn"></m-child>
data(){return {mag:''}
}
methods:{//自定义父组件的方法,val就是子给父的值,第一个参数parentFn(val){//让父组件中的数据等于子给父的,这样msg就是传过来的值this.msg=val}
}

子组件（mChild）

<button @click="childFn">methods:{childFn(){//自定意见$emit,传给父组件的事件名跟值this.$emit("childFnGetParent",'要传入的值')}
}

父传子第二种方法（$children/ $parent）

这种方法就不多解释了，挺容易理解的，实在不理解可以打印this.children/this.children/this.children/this.parent 就可以获取到信息

mounted(){this.$children/this.$parent //获取子组件或者父组件的组件信息
}

父传子的第三种方法（ref）
在父组件中的子组件m-child中添加一个ref=“事件名“

<button @click='togo'>
<m-child ref="childFn"></m-child>
mounted(){//这种是可以通过方法来取得子组件的值toGo() {//得到的就是childFn这个子组件,childFn相当于组件名,假如这个组件中有data数据//则写法就是this.$refs.childFn.data,而子组件无非就是定义数据即可console.log('我是接受参数的', this.$refs.childFn);}this.$refs.childFn
}

这种方式跟第二种相似只不过他自己起了个事件名，方便查找

非父子组件传值

传值思想其实是一致的，先使用$on定义一个全局事件，后面写个回调函数，触发这个事件执行的方法，可以接参数bus.$on('msg',val=>{ })，msg就是全局事件，然后在想要获取这个全局事件里面的值就调用他，不过这时候不是 this.emit而是bus.emit 而是 bus.emit而是bus.emit

事件总线
首先创建一个公共文件夹 util
其次在创建一个js文件例如bus.js

bus.js下面的代码

import Vue from 'vue'
export default new Vue()

这是两个组件传值,在互相传值各组件中引入bus.js文件
import bus from "../bus.js"
在A组件中通过$emit调用自定义函数并且传参

<template><div>A组件:<span>{{elementValue}}</span><input type="button" value="点击触发" @click="elementByValue"></div>
</template>
<script>// 引入公共的bug，来做为中间传达的工具import Bus from './bus.js'export default {data () {return {elementValue: 4}},methods: {elementByValue: function () {Bus.$emit('val', this.elementValue)}}}
</script>

B组件用$on事件来接收参数

<template><div>B组件:<input type="button" value="点击触发" @click="getData"><span>{{name}}</span></div>
</template>
<script>import Bus from './bus.js'export default {data () {return {name: 0}},mounted: function () {var vm = this// 用$on事件来接收参数Bus.$on('val', (data) => {console.log(data)vm.name = data})},methods: {getData: function () {this.name++}}}
</script>

只是全局组件传值,单个组件调用

然后在所有需要用到这个文件下面的数据只需要导入这个文件就行

在APP.vue下面定义一个方法

//全局中定义的方法名
methods:{passMsg(){//注意这里的写法 bus.$emit('msg','要传入的数数据')//自定义事件都用emit}
}
//子组件利用勾子函数监听事件
mounted(){bus.$on('msg',(val)=>{})
}

注意的是 在页面销毁的时候需要吧bus销毁掉destroyed() {bus.$off("child2", this.destroyedMessage);}

$ attrs / listeners
解决多级组件间传值的问题

attrs

在App.vue下面定义数据并且把想要的数据全部绑定到相应的子组件上面
然后在在其父组件上面绑定一个v-bind=‘$attrs’ 注意这里不能简写，如果本身有的数据跟vue的数据名相同时，他会自动过滤

listeners

是通过监听事件来实现的

provide 和 inject 传值

用于祖先与后代传值
这篇文章也不错后面的几种传值方式这里面有详解

vue组件之间传值的几种方式相关推荐

Vue组件之间传值的几种方法 (直接上代码)
vue组件之间传值的几种方法总结一. props(父传子) 父组件传递 <template><div><HelloWorld :msg="msg" ...
vue组件之间传值方式方法---实战面试篇
vue组件之间传值方式方法 vue组件传值 vue组件化什么是组件化? vue组件通讯父组件向子组件传值子组件向父组件传值兄弟组件传值总结 vue组件传值最近准备面试跳槽.说到前端面试,有 ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
【Vue】组件间传值的三种方式：父传子，子传父，非父子传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 1,父组件传值给子组件代码: &l ...
vue组件之间传值几种方法
方法一.父子组件传值通过props向下传递父组件 <div class="menu_header"><Menu :msgChild="msg1&qu ...
（学习总结）vue组件之间传值方式
最基础的父子组件之间传值,父组件传值给子组件需要把值传出的组件<组件名 :接收值的变量="传出值"></组件名>接收值的组件data(){}props:[ ...
vue父子组件动态传值的几种方式
1.vue父组件向子组件动态传值的两种方法在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后 ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...