在使用 vue $emit 进行兄弟组件传值时,发现 mounted 方法下不执行 $emit 传值,但是通过点击事件可以传值。
我要做的就是怎么在兄弟组件 mounted 执行完所有程序后,自动传值给其他兄弟组件。
如果有其他方法可以直接拿到兄弟组件的值更好,谢谢各位大兄弟啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<com1></com1>
<com2></com2>
</div>
<template id="com1">
<div @click="ck">组件1</div>
</template>
<template id="com2">
<div>组件2</div>
</template>
<script type="text/javascript">
var bus = new Vue();
Vue.component("com1",{
template:"#com1",
data:function(){
return {
sendData:"这是发送的数据"
}
},
mounted() {
// 此时没有触发,求帮助
this.ck();
},
methods:{
ck:function(){
bus.$emit("test",this.sendData);
}
}
});
Vue.component("com2",{
template:"#com2",
data:function(){
return {
}
},
mounted() {
bus.$on("test",function(a){
alert(a)
})
}
})
var app = new Vue({
el:"#app",
})
</script>
</body>
</html>
因为
vue
不确保父组件mounted
的时候所有的子组件都已经挂载,你可以通过加上$nextTick
来实现