Как отправить несколько методов дочернему компоненту в Vue - PullRequest
Новая
       28

Как отправить несколько методов дочернему компоненту в Vue

0 голосов
/ 20 марта 2020

Мне нужно передать два метода моему дочернему компоненту. Этот компонент <NavigationBar/>, и у меня есть два <li> элемента Field и Statistic. Когда я нажимаю Field, я хочу выполнить pausedMethod(){something=true}, когда я нажимаю Statistic, я хочу выполнить resumeMethod(){something=false}.

, я могу прослушивать одно событие, подобное этому <NavigationBar v-on:click="pauseMethod"/>, но когда я передаю другой метод <NavigationBar v-on:click="pauseMethod" v-on:click="resumeMethod"/> Я получаю сообщение об ошибке, которое я вызываю два раза для v-on:click. Как передать два компонента в компонент enet и как мне прослушать оба.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 20 марта 2020

Вы не можете сделать это в Vue. Вы можете использовать $emit для достижения этой цели: 

Vue.component("NavigationBar", {
  template: `
    <ul>
      <li @click="pause">Field</li>
      <li @click="resume">Statistics</li>
    </ul>`,
  methods: {
    pause() {
      this.$emit('pause');
    },
    resume() {
      this.$emit('resume');
    },
  }
});
Vue.component("wrapper", {
  template: `<NavigationBar @pause="onPause" @resume="onResume" />`,
  methods: {
    onPause() {
      // Do stuff
      console.log('Paused');
    },
    onResume() {
      // Do stuff
      console.log('Resumed');
    }
  }
});
new Vue({
  el: "#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <wrapper/>
</div>
0 голосов
/ 20 марта 2020

Спасибо, ребята. Я нашел решение. Проверьте это!

  • Родительский компонент

    <template> <Navigation v-on:click="myMethod"/> </template>

    <script> name:'ParentElement', data(){ somethig:true; }, methods:{ myMethod(result){ this.somethis=result; } } </script>

  • Дочерний элемент

    <ul> <li @click="$emit('click',false)">Fields</li> <li @click="$emit('click',true)">Statistics</li> </ul>

0 голосов
/ 20 марта 2020

Вы можете просто вызвать два метода в одном обработчике, например: 

<NavigationBar v-on:click="pauseMethod(); resumeMethod();" />

Или вы можете создать другой вспомогательный метод 

<NavigationBar v-on:click="handleClick" />

...

methods: {
   handleClick() {
       this.resumeMethod()
       this.pauseMethod()
   }
}
...