bus组件传值中的巨坑,第二次才控制台打印,不渲染页面QAQ
bus组件传值中的巨坑,第二次才控制台打印,不渲染页面QAQ两兄弟组件one.vue和two.vue,路由如下:{path: '/di',component: Di},{path: '/xiong',component: Xiong}bus.js代码如下:import Vue from 'vue'var bus = new Vu...
·
bus组件传值中的巨坑,第二次才控制台打印,不渲染页面QAQ
两兄弟组件one.vue和two.vue,路由如下:
{
path: '/di',
component: Di
},
{
path: '/xiong',
component: Xiong
}
bus.js代码如下:
import Vue from 'vue'
var bus = new Vue()
export default bus
哥哥two.vue代码如下:
<template>
<div>
<h1>哥哥页面</h1>
<h4>我叫{{name}}</h4>
<button @click='toDidi'>发给弟弟</button>
</div>
</template>
<script>
import bus from '../bus'
export default {
data () {
return {
name: '哥哥'
}
},
methods: {
toDidi () {
bus.$emit('toBrother', this.name)
this.$router.push('/di')
}
}
}
</script>
<style>
</style>
弟弟one.vue如下:
<template>
<div>
<h1>弟弟页面</h1>
<h4>我叫{{get}}</h4>
<h4 v-text="get2"></h4>
<input type="text" v-model="get">
</div>
</template>
<script>
import bus from '../bus'
export default {
data () {
return {
get: '',
get2: ''
}
},
beforeCreate () {
bus.$on('toBrother', item => {
console.log(bus)
console.log(item)
this.get = item
})
// console.log(this.get)
},
mounted () {
this.get2 = this.get
}
}
</script>
<style>
</style>
但是他就是渲染不出来,bug是第一次控制台不打印,页面不渲染,第二次点击控制台打印,页面不渲染,之后也控制台打印,页面不渲染,老哥救我
更多推荐
已为社区贡献2条内容
所有评论(0)