Question

主模板必须监听下拉名称=“下拉a”，一些组件必须听取下拉名称=“下拉列表b”... 主模板听取下拉列表b

主模板

<main-template>
      <dropdown name="dropdown a"></dropdown> 
      <some-component>
           <dropdown name="dropdown b"></dropdown>
      </some-component>
</main-template>

Vue.component('dropdown', {
  template: '#dropdown-template',
  methods:{
    selectedItem: function(){
      bus.$emit('selected-item');
    }
  }
});

Vue.component('some-component', {
  template: '#some-component-template',
  mounted:function(){
    bus.$on('selected-item',this.onItemSelected)
    //I want to listen dropdown b
  },
  methods:{
    onItemSelected : function(item){

    }
  }
});

new Vue({
  el: '#main-template',
    mounted:function(){
    bus.$on('selected-item',this.onItemSelected) 
      //I want to listen dropdown a
  },
  methods:{
    onItemSelected : function(item){

    }
  }

})

Answer 1

你真的不需要公共汽车。只需发出事件并从父母那里收听它。

＆＃13;

console.clear()

Vue.component('dropdown', {
  template: `<button @click="selectedItem">Emit</button>`,
  methods:{
    selectedItem: function(){
      this.$emit('selected-item');
    }
  }
});

Vue.component('some-component', {
  template: `
    <div>
      <h1>Some Component</h1>
      <dropdown @selected-item="onItemSelected"></dropdown>
    </div>`,
  methods:{
    onItemSelected : function(item){
      alert("dropdown b!")
    }
  }
});

new Vue({
  el: '#main-template',
  methods:{
    onItemSelected : function(item){
      alert("dropdown a!")
    }
  }

})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="main-template">
      <h1>Main</h1>
      <dropdown @selected-item="onItemSelected" name="dropdown a"></dropdown> 
      <some-component></some-component>
</div>

＆＃13;

上面的示例使用一个按钮代替您为下拉菜单所做的任何操作，但原理是相同的。

只有在有特殊需要时才应使用公交车。上面的代码段应该是您的默认。从组件发出事件，并使用v-on:some-event（其快捷方式为@some-event）收听这些事件。

听取特定儿童vuejs 2的发生事件

1 个答案: