使用VUE开发有一段时间了,一直都没有整理一下相关知识,今天总结下开发过程中所遇到的一些坑,主要给大家总结一下VUE组件传值的几种常用方法:
1,路由传参(参数,可以查询):
这种传参方式个人比较喜欢(也比较常用吧)它只需要在路由跳转的时候将对应的参数以对象的形式写入:
this.$router.push({name: 'routePage',query/params: { routeParams: params }})
这样使用起来很方便,但url会变得很长,而且如果不是使用路由跳转的界面无法使用对应的取值方式分别为:
this.$route.params.paramName || this.$route.query.paramName
需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用查询则不会有这个问题。
注:使用PARAMS传值,也可以做到页面刷新,参数不丢失,不过在命名路由时需要在路径这样设置:
{
path: '/test1/:orderId/:type',
name: 'test1',
component: test1
}
使用时
this.$router.push({name: 'test2', params: {orderId: id, type: 'buy'}})
2,父子通信
子传父:
子组件child.vue
<template>
<div class="child">
<h1>子组件</h1>
<button v-on:click="toParents">向父组件传值</button>
</div>
</template>
<script>
export default{
name: 'child',
data(){
return {}
},
methods: {
toParents(){
this.$emit("toParentsMsg", "子组件向父组件传值");
}
}
}
</script>
<style>
</style>
父组件:parents.vue
<template>
<div class="parents">
<h1>父组件</h1>
<Child v-on:toParentMsg="childToParentMsg" ></Child>
</div>
</template>
<script>
import Child from './child/child.vue'
export default{
name:"parents",
data(){
return {
}
},
methods: {
childToParentMsg:function(data){
alert("父组件显示信息:"+data)
}
},
components: {Child}
}
</script>
<style>
</style>
父传子:
子组件:child.vue
<template>
<div class="child">
<h1>子组件</h1>
<span>子组件显示信息:{{toChild}}</span><br>
</div>
</template>
<script>
export default{
name: 'child',
data(){
return {}
},
props:["toChild"]
}
</script>
<style>
</style>
父组件:parents.vue
<template>
<div class="parents">
<h1>父组件</h1>
<Child v-bind:toChild="parentMsg"></Child>
</div>
</template>
<script>
import Child from './child/child.vue'
export default{
name:"parents",
data(){
return {
parentMsg:'父组件向子组件传值'
}
},
components: {Child}
}
</script>
<style>
</style>
3,eventbus(非父子(同级)组件之间)
使用eventbus的方法很是简单,我们需要做三步事情,
3.1,创造一个容器去充当我们的eventbus:
在main.js全局定义一个eventBus
window.eventBus = new Vue()
3.2,抛出,或者说提交事件(eventBus。$发出)
组件一
<template>
<div class="mybustest1">
<button @click="get">点击发送数值到eventbus中</button>
</div>
</template>
<script>
export default {
name: "mybustest1",
methods: {
get: function() {
console.log("Aaa");
eventBus.$emit('eventBusName', "mytestvalue");
}
},
}
</script>
<style>
</style>
第三步,监听事件eventBus。$上上
组件2
<template>
<div class="mybustest2">
<button @click="method1">点击console.log出eventbus的信息
</button>
</div>
</template>
<script>
export default {
name: "mybustest2",
data(){
return {
diplay:false
}
},
methods: {
method1: function() {
//使用on来监听事件
eventBus.$on('eventBusName', function(val) {
console.log("这个是mybustest2的val值为:"+val)
})
}
}
}
</script>
<style>
</style>
查看效果
在App.vue中引入,先点击<mybustest1 />传入mytestvalue,再点击<mybustest2 />接收,然后再次点击<mybustest1 />查看控制台打印值是否传入
<template>
<div id="app">
<router-view/>
<mybustest1/>
<mybustest2/>
</div>
</template>
<script>
import mybustest2 from "./components/mybustest2"
export default {
name: 'App',
components:{
mybustest2
}
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
以上就是个人对VUE组件传值对一点点小理解,希望大家多多指正