0

У меня есть компонент

<template>
  <button class="btn" type="button">
       <slot></slot>
  </button>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

И есть также в компоненты в которых я использую это компонент Button

<template>
  <v-button post-title="hello" class='button' @click="methodClick">
  </v-button>
</template>

Как мне передать в компонент Button из другого компонента methodClick. Это надо для того чтобы для каждого button реализовать свой обработчик click

1
  • а разве прям так не работает?
    – Grundy
    12 окт 2018 в 10:17

1 ответ 1

1

Есть 3 варианта:

1) Через $emit('click')

Добавьте в

<button class="btn" type="button">
    <slot></slot>
</button>

@click="$emit('click')", чтобы вышло так:

<button class="btn" type="button" @click="$emit('click')">
    <slot></slot>
</button>

Теперь можно передавать слушать событие так:

<v-button post-title="hello" class='button' @click="methodClick">
</v-button>

2) модификатор .native

Можно легко слушать события корневого элемента компонента через модификатор .native

3) Продвинутый способ v-on="$listeners"

Через v-on можно ставить слушателей которые в объекте. $listeners это список слушателей которые запрашиваются у компонента. То есть, те слушатели которые ставятся компоненту автоматически ставятся на элемент у которого v-on="$listeners". Vue замечателен 😊

Все 3 варианта:

var component1 = {
  template: `<button class="btn" type="button" @click="$emit('click')">
    <slot></slot>
  </button>`
}
var component2 = {
  template: `<button class="btn" type="button">
    <slot></slot>
  </button>`
}

var component3 = {
  template: `<button class="btn" type="button" v-on="$listeners">
    <slot></slot>
  </button>`
}

var app = new Vue({
  el: '#app',
  components: { component1, component2, component3 },
  data: () => ({
    count: 0
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app" style="height: 1000px; background: yellow;">
  Вы нажали но кнопки: {{ count }} раз <br>
  
  <component1 @click="count++">
    Вариант 1
  </component1>
  
  <component2 @click.native="count++">
    Вариант 2
  </component2>
  
  <component3 @click="count++">
    Вариант 3
  </component3>
</div>

2
  • Лучше сделать так: ``` <button class="btn" type="button" v-on="$listeners"> <slot></slot> </button> ``` Это позволит навешивать и другие обработчики, без явного указания .native. 13 окт 2018 в 13:42
  • @yarkov_aleksei спасибо, это очень удобно! 13 окт 2018 в 19:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.