Vue事件修饰符.native及其他

.stop调用event.stoppropagation()。(阻止事件冒泡)   eg:触发子元素事件时不会冒泡影响到外层父元素事件

.prevent调用event.preventDefault()。(阻止默认事件)    eg:<input type="submit"  v-on:click.stop.prevent="onSubmit"/> 提交不重载页面

@keyup监听键盘弹起事件 

@keydown监听键盘按下事件

@keyup.enter(键码)监听回车键弹起事件    eg:<input v-on:keyup.left.right.enter.90="keyup"/> 可以设定多个按键的值

.once只触发一次回调

.native监听组件根元素的原生事件 

1，给vue组件绑定事件时候，必须加上native ，不然不会生效（注意给普通标签加.native无效）

2，在组件上v-on时，我们监听的是组件的自动触发的自定义事件，

3，等同于在自定义组件中：

   子组件内部处理click事件然后向外发送click事件：$emit("click".fn) //执行两次函数

<div id="app">
    <a-cmp @change='handleClick'></a-cmp>
</div>
<script>
    const vm = new Vue({
            el: '#app',
            methods: {
                handleClick() {
                    alert('click');
                }
            },
            components: {
                'a-cmp': {
                    template:`<div @click='handleClick'> child </div>`,
                    methods: {
                       handleClick() {
                          console.log('组件');
                          this.$emit('change');
                       }
                    }
                 }
             }
     })
</script>

可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

vm.$listener 包含了父组件中（除了 .native 修饰器以外的）事件监听器。

可以在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。

然后我们可以在子组件的this.$listeners可以取到eventName这个方法。
子组件可以通过this.$emit('eventName', data) 执行父组件绑定的方法。常用于子组件向父组件通信。

此外：vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听。

@click 自定义函数传参

事件调用时候需要传入原生事件event(通过$event)及其他参数时 

注意仅仅传入原生事件event时,省略(),直接形参获取到event参数；但如果加了()不传实参，则形参为undefined 

<button @click="btnClick($event,'123')">按钮</button>

btnClick(event,value) { console.log(event,value) }