vue native修饰符(组件标签上的事件修饰符native详解)

原生事件修饰符.native关于组件标签上的事件，父组件使用子组件时的修饰符，在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理。

1、关于组件标签上的事件

示例代码如下:

<div id="app">
  <!-- 使用组件 -->
  <!--  组件标签上使用DOM元素原生事件不会触发, -->
  <my-component :clicks="clicks" @click="handleParentClick"></my-component>
</div>
<!-- 组件模板 -->
<template id="MyComponent">
  <div> 被点击了 <button>点击</button> </div>
</template>
<script>
  //  组件选项对象
  let MyComponent = {
    template: `#MyComponent`,
  }
  //  实例中注册组件 
  const vm = new Vue({
    el: "#app",
    components: {
      "MyComponent": MyComponent
    },
    methods: {
      handleParentClick() {
        // 11 不会打印 
        console.log(11);
      }
    }
  })
</script>

此时子组件上绑定的是自定义的事件不是原生的事件,
因为是自定义事件,我们就可以通过使用触发自定义事件的方式,来触发.
通过$emit 触发这个组件标签上的自定义事件

示例代码如下:

<div id="app">
  <!-- 使用组件 -->
  <!--  click 事件不会被当做DOM原生事件处理,只会被当做自定义事件处理-->
  <my-component @click="handleParentClick"></my-component>
</div>
<!-- 组件模板 -->
<template id="MyComponent">
  <div> 被点击了
    <!-- 1. 子组件通过原生click事件触发子组件自己的函数 -->
    <button @click="handleClick">点击</button>
  </div>
</template>
<script>
  //  组件选项对象
  let MyComponent = {
    template: `#MyComponent`,
    methods: {
      handleClick() {
        // 触发组件标签上自定义事件click
        this.$emit("click")
      }
    }
  }
  //  实例中注册组件
  const vm = new Vue({
    el: "#app",
    components: {
      "MyComponent": MyComponent
    },
    methods: {
      handleParentClick() {
        console.log(11);
      }
    }
  })
</script>

2、可以通过修饰符来处理组件标签上的原生事件

如果需要在子组件的dom上绑定原生的事件,而不是一个自定义事件该如何处理
可以通过 vue提供了修饰符.native来告知绑定的是原生的事件

示例代码如下:

<div id="app">
  <!-- 使用组件 -->
  <!-- 在组件标签上,如果需要使用原生事件,使用修饰符native, 这样vue就会把他当做原生事件处理了-->
  <my-component @click.native="handleParentClick"></my-component>
</div>
<!-- 组件模板 -->
<template id="MyComponent">
  <div> 被点击了 <button>点击</button> </div>
</template>
<script>
  //  组件选项对象
  let MyComponent = {
    template: `#MyComponent`,
  }
  //  实例中注册组件
  const vm = new Vue({
    el: "#app",
    components: {
      "MyComponent": MyComponent
    },
    methods: {
      handleParentClick() {
        console.log(11);
      }
    }
  })
</script