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学习笔记之JS事件对象
Jan 22 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
js DOM的事件常见操作实例详解
Dec 16 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
js数组的基本使用总结
Jan 18 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
PHP与SQL注入攻击[三]
2007/04/17 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Python的迭代器和生成器
2015/07/29 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
求职者简历中的自我评价
2013/10/20 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Python Django项目和应用的创建详解
2021/11/27 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript