正如 Chris Fritz（Vue.js核心团队荣誉退休人员）在VueCONF US 2019中提到的
如果我们让 Kia 输入.native，然后基本输入的根元素从输入更改为标签，突然该组件被破坏并且不明显，事实上，除非您有一个非常好的测试，否则您甚至可能无法立即捕获它。相反，通过避免使用我目前认为是反模式并将在 Vue 3 中删除的.native修饰符，您将能够显式定义父级可能关心添加到哪些元素侦听器...
使用 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>
运行代码片段Hide results
展开片段
我们也可以使用该$emit方法来实现此目的，这有助于我们在父组件中监听子组件的事件。为此，我们首先需要从子组件发出自定义事件，例如：
Test.vue（子组件）
<test @click="$emit('my-event')"></test>
**重要提示：**始终使用短横线命名的事件名称。有关这一点的更多信息和演示，请查看此答案：VueJS将计算值从组件传递到父级。
现在，我们只需要在父组件中监听这个发出的自定义事件，例如：
应用程序.vue
<test @my-event="testFunction"></test>
所以基本上，我们将简单地使用or 来代替or 的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>
运行代码片段Hide results
展开片段
使用 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="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<div id="myApp">
<test v-on:click="testFunction"></test>
</div>
运行代码片段Hide results
展开片段
但是，对于具有嵌套元素的复杂组件，我们需要将属性和事件应用于而<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="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<div id="myApp">
<base-input
label="Search: "
placeholder="Search"
@keyup="search">
</base-input><br/>
</div>
运行代码片段Hide results
展开片段
