第一种 this.$emit(),子组件向父组件传参
首先在子组件加上点击事件触发才能传参,
// 子组件
<template>
<div class="title">
<button @click="btn()">提交</button>
</div>
</template>
<script>
export default {
methods: {
btn () {
this.$emit('get', 123)
}
}
}
</script>
// 父组件
<template>
<div>
// 子组件
<Title @get='get' />
子组件传参{{title}}
</div>
</template>
<script>
export default {
data () {
return {
title: ''
}
},
methods: {
get (val) {
this.title = val
}
}
}
</script>
第二种,跨组件传参
// 在main.js文件中挂载 $bus
Vue.bus = Vue.prototype.$bus = new Vue();
// 发射事件,进行传参
this.$bus.$emit("search", {
orgId: this.orgId,
projectType: this.projectType,
projectYear: this.yearSelection,
});
// 监听事件,获取参数
this.$bus.$on("search", (params) => {
this.params = params;
});