Как добавить функцию щелчка к импортированному компоненту в Vue

Question

Итак, у меня есть приложение Vue2. Я создал компонент "u-button"

когда я импортирую это и использую в другом компоненте, я хочу иметь возможность добавить функцию щелчка к нему. Однако в данный момент он ищет функцию для компонента u-button, а не для компонента, в котором он используется.

так, например, в приведенном ниже примере, если я нажимаю первую кнопку, ничего не происходит, если я нажимаю вторую кнопку, я получаю журнал консоли.

<template>
    <div>
        <u_button @click="clicked">Click me</u_button>
        <button @click="clicked">Click me</button>
    </div>
</template>

<script>
    import u_button from '../components/unify/u_button'

    export default {
        components: {
            u_button
        },
        methods: {
            clicked() {
                console.log("Working!");
            }
        }
    }

</script>

Однако, если я добавляю метод к компоненту u-button, он вызывает его. Так как я могу заставить работать мой пример ниже? Единственное, о чем я могу думать, - это обернуть его в другой элемент div и добавить к нему функцию щелчка. но мне интересно, есть ли лучший способ ?? Я не хочу использовать события, чтобы сделать это, так как это очень быстро запутывается.

Как вы можете себе представить, многоразовая кнопка, которая при нажатии всегда выполняет одну и ту же функцию, немного бессмысленна.

Answer 1

Это связано с природой компонентов, например, если у нас был (виртуальный) компонент iframe с кнопкой в ​​нем, и мы хотели бы обнаружить событие click, мы могли бы назвать событие click и прослушать его в родительском компоненте; поэтому Vue представила функцию, называемую модификаторы событий, например, в Vue, у нас есть модификатор .native (вы можете узнать больше о модификаторах Vue здесь )

Теперь, чтобы ваш код работал, вы должны добавить .native после @click, например:

<u_button @click.native="clicked">Click me</u_button>

Кстати, лучше разработать для себя соглашение об именах. Это станет удобным, когда ваши проекты станут больше.