bus $on
通过事件总线bus传值\
再main.js里首先声明
Vue.prototype.$bus=new Vue();
// 父组件
<template>
<div>
<child1></child1>
<child2></child2>
</div>
</template>
<script>
import child1 from './userChild/child1'
import child2 from './userChild/child2'
export default {
components:{
child1,
child2
},
data(){
return {
value:'',
}
},
}
</script>
//子组件1
<template>
<div class="child1">
子组件1
<div>
<el-input v-model="value"></el-input>
<el-button @click="submit">提交</el-button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
value:''
}
},
methods:{
submit(){
this.$bus.$emit('name',this.value)
}
}
}
</script>
<style lang="scss" scoped>
.child1{
width: 700px;
height: 100px;
margin: 10px;
border: 1px solid #333;
.el-input{
width: 200px;
}
}
</style>
<template>
<div class="child2">
子组件2
<div>
{{value}} 提交了申请
</div>
</div>
</template>
<script>
export default {
data(){
return{
value:''
}
},
mounted(){
this.$bus.$on('name',(value)=>{
this.value=value;
})
}
}
</script>
<style lang="scss" scoped>
.child2{
width: 700px;
height: 60px;
margin: 10px;
border: 1px solid #333;
}
</style>