Vue $emit 不生效,$emit 在 mounted中不生效

在使用 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>

阅读 6.4k
2 个回答

因为vue不确保父组件mounted的时候所有的子组件都已经挂载,你可以通过加上$nextTick来实现

mounted() {
  this.$nextTick(() => {
    this.ck();
  });
},

一定要这么骚吗
vuex 了解一下

实在不行 数据放根组件上 子组件都可以this.$root 访问根组件实例 bus放弃吧自己挖坑那是

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题