详解Vue2.0之去掉组件click事件的native修饰

2024-03-23 09:19:28

这个是在组件开发中遇到的问题，当时我在编写button的组件，模板是这样的：

<template>
 <button class="disable-hover button ion-button"
     :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
  <span class="button-inner">
   <slot></slot>
  </span>
  <div class="button-effect"></div>
 </button>
</template>

使用是这样子的：

<ion-button @click.native="primary()" color="primary">primary</ion-button>

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符，故写法就像上面这样。

好吧，处女座的毛病又来了。像button这样常用的组件如果加上native的话是感觉很突兀的。虽然组件设计有自身的考虑，因此我想将click的native去掉，思路如下：

子组件监听父组件给的click事件，
子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

改造后的代码如下(亲测可用)：

<template>
 <button class="disable-hover button ion-button" @click="_click"
     :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
  <span class="button-inner">
   <slot></slot>
  </span>
  <div class="button-effect"></div>
 </button>
</template>

<script type="text/babel">
export default{
  ....
  ....
  methods: {
   _click: function () {
    this.$emit('click', function () {
     alert('inner')
    })
   }
  }
}
</script>

父组件中这样使用：

<ion-button @click="primary()" color="primary">primary</ion-button>

也许读者能看出来，我正在参照IONIC2.X的组件API写Vue2.0的功能组件，目前只完成了：ActionSheet、Button、Icon、Alert、Toast这几个，一边看IONIC源码，一边将思路总结写成Vue代码，也就是花点时间。积累自己的组件库希望以后能开发快点。

现在项目地址在这里，前期以实现功能为主，不建议用在生产环境，读读代码实现思路就好，中文备注都做好了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue-cli的webpack模板项目配置文件分析

由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser
详解Vue使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功. 二.安装 vue-cli 安装好了 node,我们可以直接全局安装 vue-
详解vue-cli快速构建项目以及引入bootstrap、jq

vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli 全局安装vue-cli vue init webpack cnm 生成项目名为cnm的的项目模板,cnm自定义 npm install 到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖此时文件夹目录应该是这样然后
深入理解Vue-cli搭建项目后的目录结构探秘

我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html
windows下vue-cli及webpack搭建安装环境

1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm
详解如何使用vue-cli脚手架搭建Vue.js项目

1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init
Vue学习笔记进阶篇之vue-cli安装及介绍

介绍 Vue-cli是Vue的脚手架工具主要作用:目录结构.本地调试.代码部署.热加载.单元测试地址:https://github.com/vuejs/vue-cli 安装全局安装vue-cli npm install -g vue-cli 当然了,要想使用npm工具,就必须安装Node.js,node.js的安装方法这里就不做介绍了. 安装完成后,在终端输入以下命令, 可以查看vue的版本:vue -V 输入以下命令,可以查看官方提供的模板: vue list 我们可以看到,vue官方提
vue-cli入门之项目结构分析

前言在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli项目,那么接下来,我们来梳理一下vue-cli项目的结构. 总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build--[webpack配置] build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是
vue-cli中打包图片路径错误的解决方法

最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下就是比如:www.****.com 找到项目中config文件夹下的index.js文件将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径如果放在根目录下,这样就可以了 2.放在子目录下如
vue2.0中click点击当前li实现动态切换class

1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法. 看详解:https://cn.vuejs.org/v2/api/#Vue-set <template> <div> <ul> <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class=&

详解Vue2.0之去掉组件click事件的native修饰

相关推荐

随机推荐