Vue2事件总线第二个电话

  • Z时代
  • 2024-01-10
  • 分类：问答

工作后我有一个嵌套的组件和子组件应接收来自主实例的参数，但问题是，我有打电话给事件两次获得参数。Vue2事件总线第二个电话

的index.html

<div id="app"> 
    <button @click="displayComponent">Display</button><br/><hr/> 
    {{ message }} 
    <mycomponent v-if="showComponent" @hide="hideComponents"></mycomponent> 
</div>

code.js

window.bus = new Vue(); 
Vue.component('mycomponent', { 
    template: ` 
     <div> 
      <h3>Im the parent component</h3> 
      <childcomponent></childcomponent> 
      <button @click="$emit('hide')">Hide components</button> 
     </div> 
    ` 
}); 
Vue.component('childcomponent', { 
    template:` 
     <div> 
      <h4>Im the child component</h4> 
      <p>{{ data }}</p> 
     </div> 
    `, 
    data() { 
     return { 
      text: 'Nothing loaded' 
     }; 
    }, 
    methods: { 
     test() { 
      alert('hello'); 
     }, 
     getData(x) { 
      this.text = x; 
     } 
    }, 
    created(){ 
     bus.$on('extraCall', data => { 
      this.getData(data); 
      this.test(); 
     }); 
    } 
}); 
const app = new Vue({ 
    el: '#app', 
    data: { 
     message: 'hello world!', 
     showComponent: false 
    }, 
    methods: { 
     displayComponent() {   
      bus.$emit('extraCall', 'this is some extra text'); 
      this.showComponent = true; 
     }, 
     hideComponents() { 
      this.showComponent=false; 
     } 
    } 
});

子组件元件内的文本值被设置为默认值，显示按钮被点击后它触发bus.$emit与extraCall事件与一些文本作为参数，这应该更新文本值，并且它只发生在第二次点击显示按钮后。

我缺少什么？

回答：

<mycomponent>（及其子小孩<childcomponent>）由于v-if="showComponent"在单击显示按钮时未被实例化。

首先点击：

  1. extraCall发出总线上，但因此将其忽略没有监听该事件。

  2. <mycomponent>设置showComponent为true之后被实例化。

  3. <mycomponent>在其created钩extraCall事件进行注册的监听器。

第二点击：

  1. extraCall发出总线上，并<mycomponent>处理它。

你可能会认为bus.$emit()和this.showComponent = true行应该被交换，使<mycomponent>被之前实例化事件被发出，但这仍然无法工作，因为Vue公司推迟组件的创建，直到下一个microtask时该视图已更新。

这可能会实现：

displayComponent() { 
    this.showComponent = true; 
    // Wait for child component to be instantiated 
    this.$nextTick(() => { 
    bus.$emit('extraCall', 'this is some extra text'); 
    }); 
}

如果上面的代码为你工作，我还是真的不推荐它虽然。在发布事件之前，您不需要考虑创建子组件（它将您的组件连接在一起）。您应该以其他方式共享数据，查看其他SO问题，了解跨组件共享数据的最佳方式。

以上是 Vue2事件总线第二个电话 的全部内容， 来源链接： utcz.com/qa/261151.html

回到顶部