Как кликнуть кнопку, используя $emit vue.js?

Question

[Martovitskiy]

Не получается пробрасить клик в дочерний элемент. Читаю документацию и не понимаю https://vuejs.org/v2/guide/
index.vue

<template>
    <div class="fullpage-container">
        <div class="page-home">
            <div class="button-group">
                <b-button-group vertical>
                    <b-button type="button"  v-bind:class="[{active:index ==0}]" @click="moveTo(2)">   // кликнуть эту кнопку
                        button
                    </b-button>
                </b-button-group>
            </div>
            <div class="fullpage-wp" v-fullpage="opts" ref="example">
                ...
                <div class="page">
                    <logo></logo>
                </div>
                ...
            </div>
        </div>
    </div>
</template>
<script>
import Logo from '~/components/Logo.vue'

export default {
  data () {
    var that = this
    return {
      index: 0,
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (prev, next) {
             that.index = next
        },
        afterChange: function (prev, next) {
        }
      }
    }
  },
  methods: {
    moveTo (index) {
      this.$refs.fullpage.$fullpage.moveTo(index, true)
    }
  },
  components: {
    Logo
    ...
  }
}
</script>

logo.vue

<template>
    <b-button v-on.click="trigger">click</b-button>  // этой кнопкой
</template>
<script>
export default {
   data () {
....
  },
  methods: {
        trigger: function () {
    	      // this.$emit
      }
  }
}
</script>

Answer 1

[Artem0071]

В основном компоненте:
<logo @handleAction="moveTo"></logo>

В лого:

trigger: function () {
    this.$emit('handleAction')
}

Правда я не понял какой вы там index хотите получить, но проброска делается так

Если хотите еще какую то переменную пробросить, то надо так:

trigger: function () {
    this.$emit('handleAction', someParam)
}

Comments

[Martovitskiy]

Спасибо большое. Очень помог.

Answer 2

[Max]

@click.native="<blockquote>Метод/Функция/...</blockquote>"

Comments

[Martovitskiy]

Max круто, но вопрос задавался более 3х лет назад

[Max]

Martovitskiy, сорян, зря быканул)))

[Max]

Martovitskiy, и есть другое решение для самого кастомного компонента кнопки, чтоб не писать native.
В самом компоненте

<button
    :class="['btn', { 'opacity-50 cursor-not-allowed': disabled }]"
    :type="type"
    :disabled="disabled"
    @click="$emit('click', $event.target.click)"
  >
    <slot />
  </button>