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 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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
第四节--构造函数和析构函数
2006/11/16 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python json格式化打印实现过程解析
2020/07/21 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫