vue 中几种传值方法(3种)

2023-08-09 13:18:04 72

前言

vue项目中，组件跟组件之间数据的传递是很普遍的行为，在这里总结几种常见的vue组件跟组件之间传值方式，其中，主要有父子组件，非父子组件传值。

父组件向子组件传值

方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可。具体可参考官方文档。

父组件传递参数代码如下：

上面代码，通过在子组件上面绑定动态参数:form='userinfo'将父组件中的参数传递给子组件，子组件就可以通过props来进行接收。

子组件接收参数代码如下：

...
exportdefault{
props:{
//接收
form:{userinfo:Object}
}
},
}

//另一种写法
exportdefault{
props:{
//接收
form:['userinfo']
}
},
}

上面代码中，还可以使用数组来接受参数，但是不能指定参数的类型。

子组件向父组件传值

方法：子组件通过vue实例方法$emit进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理。

子组件向上传值

上面代码中，this指代的是vue实例，子组件通过$emit向父组件触发事件和传递参数。

父组件监听子组件传来的值

上面代码中，在子组件中监听方法，如果子组件触发方法，父子间这边就可以得到子组件传过来的参数了。

非父子组件传值一

EventBUS总线方法：通过新建一个vue实例，来实现$on接收和$emit来触发事件

1、新建bus.js文件：

//common/bus.js

importVuefrom'vue';

//使用EventBus
constbus=newVue();

exportdefaultbus;

2、组件1（接收通知信息）

importbusfrom'@/common/bus.js'

exportdefault{
data(){
return{
collapseData:''
}
},
created(){
//监听collapse，有变动就会收到通知，并改变collapseData值
bus.$on('collapse',msg=>{
this.collapseData=msg
})
}
}

3、组件2（发布信息）

importbusfrom'@/common/bus.js'

exportdefault{
methods:{
sendData(){
//发布信号，触发这个函数，其他的接收函数都会收到相应的信息
bus.$emit('collapse','信息')
}
}
}

非父子组件传值二

借组vux插件实现组件之间的传值。

1、通过npm加载vuex，创建store.js文件，然后在main.js中引入，store.js文件代码如下：

importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex);
conststate={
message:'HelloWorld'
};
constmutations={
newMessage(state,msg){
state.message=msg
}
}
exportdefaultnewVuex.Store({
state,
mutations
})

3、在组件中存vuex的值，一般如下：

state里面的值只能通过Action来提交来修改和赋值。




//引入mapActions，很重要
import{mapActions}from'vuex'
exportdefault{
data(){
return{
username:'',
password:''
}
},
methods:{
...mapActions({
//在input的blur事件中触发回调，并将输入值作为参数返回到store中
saveName:'saveName'
})
}
}

3、在组件中获取Vuex的值，一般如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 中几种传值方法(3种)

热门推荐

随机推荐