Vue的自定义组件不能使用click方法的解决


Posted in Javascript onJuly 28, 2020

先贴代码

var myButton = Vue.extend({//设置标签
    props: ['names', 'item2'],//names为按钮名,item2为数据
    template: '<span><span v-for="obj in item2" v-if="obj.name==names" v-html="obj.code"></span></span>'
  })
  Vue.component('my-button', myButton);//注册组件

这是上篇博客的自定义按钮权限的代码,然后调用代码:

<my-button names="修改" v-bind:item2="btdata"></my-button>

当你在这个标签上加@click事件的时候报错,原因是因为没有加上native,官网对于native的解释为:

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

正确的代码为:

<my-button @click.native="alert1()" names="删除" v-bind:item2="btdata"></my-button>

这样就能成功在自定义标签上绑定事件了

补充知识:Vue中利用component切换组件

我就废话不多说了,大家还是直接看代码吧~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <a href="#" rel="external nofollow" rel="external nofollow" @click="componentName='mycom1'">组件1</a>
    <a href="#" rel="external nofollow" rel="external nofollow" @click="componentName='mycom2'">组件2</a>
    <component :is="componentName"></component>
  </div>
</body>
<script>
 
  Vue.component('mycom1',{
    //注意无论是哪种方式创建组件,template都只能有一个唯一的根元素
    template: '<h3>组件1</h3>',//指定组件要展示的html结构
  })
 
  Vue.component('mycom2',{
    //注意无论是哪种方式创建组件,template都只能有一个唯一的根元素
    template: '<h3>组件2</h3>',//指定组件要展示的html结构
  })
 
  //创建一个vue实例
  //当我们导入包之后,在浏览器的内存中就多了一个vue构造函数
  var vm = new Vue({
    el: '#app',//表示当前我们new的这个vue实例要控制页面上的哪个区域
    data: { //data属性中存放的是el中要用到的数据
      componentName: 'mycom1'
    }
  });
  
</script>
</html>

以上这篇Vue的自定义组件不能使用click方法的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
js单词形式的运算符
May 06 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
浅谈JavaScript中this的指向问题
Jul 28 #Javascript
浅谈JavaScript中this的指向更改
Jul 28 #Javascript
Postman内建变量常用方法实例解析
Jul 28 #Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 #Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 #Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 #Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 #Javascript
You might like
PHP5 面向对象(学习记录)
2009/12/02 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
Python入门篇之条件、循环
2014/10/17 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
2013的个人自我评价
2013/12/26 职场文书
单位在职证明范本
2014/01/09 职场文书
工程项目经理任命书
2014/06/05 职场文书
询价采购方案
2014/06/09 职场文书
远程培训的心得体会
2014/09/01 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
迟到检讨书
2015/01/26 职场文书
开展警示教育活动总结
2015/05/09 职场文书
新闻通讯稿范文
2015/07/22 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis