Vue中native的用法

Vue中native的用法nativenative在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件，但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解：例子四个按钮，分别是普通标签不加native和加native，自定义标签不...

qq_41428035

10786人浏览 · 2019-10-23 15:44:52

qq_41428035 · 2019-10-23 15:44:52 发布

Vue中native的用法

native

native在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件，但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解：

例子

四个按钮，分别是普通标签不加native和加native，自定义标签不加native和加native

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
</head>
<body>
<div id="app">
  <button @click="add(this)">普通的html标签，不包含native的按钮</button><br/>
  <button @click.native="add(this)">普通的html标签，包含native的按钮</button><br/>
  <myself-button @click="add(this)"/></myself-button><br/>
  <myself-button @click.native="add(this.id)"/></myself-button>
  <div>
</body>
  <script>
    Vue.component('myself-button', {
        template: `<button>我是自定义的标签</button>`
    });
    var vm=new Vue({
      el:"#app",
      data:{
      },
      methods:{
        add:function(obj){
          console.log(obj+'我触发了');
        },
      }
    });
  </script>
</html>

大家猜测一下哪个按钮会触发事件，下面我依次点击了四个按钮，console中的结果如图
在这里插入图片描述
现在native的作用就很显而易见了
以上事例测试代码及输出来自JS Bin

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^