Как отметил Крис Фриц (Vue.js Core Team Emeriti ) в VueCONF US 2019
если бы у нас был ввод Kia, .nativeа затем корневой элемент базового ввода изменился с входа на метку, внезапно этот компонент сломался, и это не очевидно, и на самом деле, вы могли бы даже не поймать его сразу, если у вас не будет действительно хорошего теста. Вместо этого, избегая использования .nativeмодификатора, который в настоящее время я считаю, анти-шаблон будет удален в Vue 3, вы сможете явно определить, что родитель может заботиться о том, какие слушатели элемента добавляются в ...
С Vue 2
Использование $listeners:
Итак, если вы используете Vue 2, лучшим вариантом для решения этой проблемы будет использование полностью прозрачной логики оболочки . Для этого Vue предоставляет $listenersсвойство, содержащее объект слушателей, используемых на компоненте. Например:
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
и тогда нам просто нужно добавить v-on="$listeners"кtest компоненту, как:
Test.vue (дочерний компонент)
<template>
<div v-on="$listeners">
click here
</div>
</template>
Теперь <test>компонент представляет собой полностью прозрачную оболочку , то есть он может использоваться точно так же, как обычный <div>элемент: все слушатели будут работать без .nativeмодификатора.
Демо-версия:
Vue.component('test', {
template: `
<div class="child" v-on="$listeners">
Click here
</div>`
})
new Vue({
el: "#myApp",
data: {},
methods: {
testFunction: function(event) {
console.log('test clicked')
}
}
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
<test @click="testFunction"></test>
</div>
Используя $emitметод:
Мы также можем использовать $emitметод для этой цели, который помогает нам слушать события дочерних компонентов в родительском компоненте. Для этого нам сначала нужно создать пользовательское событие. из дочернего компонента, например:
Test.vue (дочерний компонент)
<test @click="$emit('my-event')"></test>
Важно: Всегда используйте kebab-case для имен событий. Для получения дополнительной информации и демонстрации этого пункта, пожалуйста, ознакомьтесь с ответом: VueJS передает вычисленное значение от компонента к родителю. .
Теперь нам просто нужно прослушать это излучаемое пользовательское событие в родительском компоненте, например:
App.vue
<test @my-event="testFunction"></test>
Таким образом, в основном вместо v-on:clickили стенографии @clickмы будем просто использовать v-on:my-eventили просто@my-event .
Демо-версия:
Vue.component('test', {
template: `
<div class="child" @click="$emit('my-event')">
Click here
</div>`
})
new Vue({
el: "#myApp",
data: {},
methods: {
testFunction: function(event) {
console.log('test clicked')
}
}
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
<test @my-event="testFunction"></test>
</div>
С Vue 3
С помощью v-bind="$attrs":
Vue 3 собирается сделать нашу жизнь намного проще во многих отношениях. Одним из примеров этого является то, что это поможет нам создать более простую прозрачную оболочку с очень небольшим количеством настроек, просто используя v-bind="$attrs". При использовании этого в дочерних компонентах не только наш слушатель будет работать напрямую от родительского, но также любой другой атрибут также будет работать как обычный<div> .
Итак, что касается этого вопроса, нам не нужно ничего обновлять в Vue 3, и ваш код все равно будет работать нормально, как <div>корневой элемент, и он будет автоматически прослушивать все дочерние события.
Демо № 1:
const { createApp } = Vue;
const Test = {
template: `
<div class="child">
Click here
</div>`
};
const App = {
components: { Test },
setup() {
const testFunction = event => {
console.log("test clicked");
};
return { testFunction };
}
};
createApp(App).mount("#myApp");
div.child{border:5px dotted orange; padding:20px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
<test v-on:click="testFunction"></test>
</div>
Но для сложных компонентов с вложенными элементами, где нам нужно применять атрибуты и события к main <input />вместо родительской метки, мы можем просто использоватьv-bind="$attrs"
Демонстрация № 2:
const { createApp } = Vue;
const BaseInput = {
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input v-bind="$attrs">
</label>`
};
const App = {
components: { BaseInput },
setup() {
const search = event => {
console.clear();
console.log("Searching...", event.target.value);
};
return { search };
}
};
createApp(App).mount("#myApp");
input{padding:8px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
<base-input
label="Search: "
placeholder="Search"
@keyup="search">
</base-input><br/>
</div>
@click.native="testFunction"