分析Vue框架源码心得
1、在封装一个公用组件,比如button按钮,我们多个地方使用,不同类型的button调用不同的方法,我们就可以这样用
代码片段:
<lin-button v-for="(item,index) in operate"
@click.native.prevent.stop="buttonMethods(item.func, scope.$index, tableData)">
</lin-button>
methods里面
buttonMethods(func, index, row) {
const _this = this
const { methods } = this.$options //注意这部分
methods[func](_this, index, row) // 注意这部分
},
handleEdit(_this, index, row) {
_this.$emit('handleEdit', { index, row })
},
handleDelete(_this, index, row) {
_this.$emit('handleDelete', { index, row })
}
this.operate = [{ name: '编辑', func: 'handleEdit', type: 'edit' }, { name: '删除', func: 'handleDelete', type: 'del' }]
const { methods } = this.$options
methods[func](_this, index, row)
通过this.$options获取到到当前实例里面的数据,包括:data、props、computed、methods等
通过es6的解构语法获取到methos
通过func获取到methods里对应的方法,然后传入参数,执行
分析Vue框架源码心得的更多相关文章
- vue源码分析—Vue.js 源码构建
Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...
- vue源码分析—Vue.js 源码目录设计
Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...
- Vue.js 源码分析(一) 代码结构
关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...
- 介绍开源的.net通信框架NetworkComms框架 源码分析
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 售价249英镑 我曾经花了 ...
- Android Small插件化框架源码分析
Android Small插件化框架源码分析 目录 概述 Small如何使用 插件加载流程 待改进的地方 一.概述 Small是一个写得非常简洁的插件化框架,工程源码位置:https://github ...
- YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)
YII 框架源码分析 百度联盟事业部——黄银锋 目 录 1. 引言 3 1.1.Yii 简介 3 1.2.本文内容与结构 3 2.组件化与模块化 4 2.1.框架加载和运行流程 4 ...
- Spark RPC框架源码分析(一)简述
Spark RPC系列: Spark RPC框架源码分析(一)运行时序 Spark RPC框架源码分析(二)运行时序 Spark RPC框架源码分析(三)运行时序 一. Spark rpc框架概述 S ...
- Spark RPC框架源码分析(二)RPC运行时序
前情提要: Spark RPC框架源码分析(一)简述 一. Spark RPC概述 上一篇我们已经说明了Spark RPC框架的一个简单例子,Spark RPC相关的两个编程模型,Actor模型和Re ...
- Spark RPC框架源码分析(三)Spark心跳机制分析
一.Spark心跳概述 前面两节中介绍了Spark RPC的基本知识,以及深入剖析了Spark RPC中一些源码的实现流程. 具体可以看这里: Spark RPC框架源码分析(二)运行时序 Spark ...
随机推荐
- Android手机特殊软件配置
1. 安装360一键root http://root.360.cn/ 2.安装SSHdroid 用于启用手机的ssh 地址:https://www.apk20.com/apk/77332/v/7346 ...
- gson和fastjson将json对象转换成javaBean 简单对照
今天在网上看代码时,发现项目使用了Gson,用于将json字符串转换成javaBean. 以前没使用过Gson,随即,简单入了个们, 想起fastjson也有将json字符串转换成javaBean的A ...
- Coursera, Deep Learning 4, Convolutional Neural Networks, week3, Object detection
学习目标 Understand the challenges of Object Localization, Object Detection and Landmark Finding Underst ...
- luogu P3297 [SDOI2013]逃考
传送门 gugugu 首先每个人管理的区域是一个多边形,并且整个矩形是被这样的多边形填满的.现在的问题是求一条经过多边形最少的路径到达边界,这个可以最短路. 现在的问题是建图,显然我们应该给相邻的多边 ...
- 第27月第24天 git pull fetch
1. 在进行 pull 操作的同时,其实就是 fetch+merge 的一个过程.我们从 remote 分支中拉取新的更新,然后再合并到本地分支中去. 如果 remote 分支超前于本地分支,并且本地 ...
- 第25月第9天 tf_tang_poems kaggle
1.neural-style https://github.com/anishathalye/neural-style wget http://www.vlfeat.org/matconvnet/mo ...
- python写商品管理练习
#.添加 #.商品名称 #.要从文件里面把所有的商品读出来 #.价格 #.写一个方法判断是否为合理的价格 #.数量 #整数 # product = { # "爱疯差":{ # &q ...
- MD5加密文件
package cn.net.comsys.ut.util; import java.io.File;import java.io.FileInputStream;import java.io.IOE ...
- 表单相关标签之form标签
表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...
- 【blog】MarkDown语法解析为HTML工具
txtmark <dependency> <groupId>es.nitaur.markdown</groupId> <artifactId>txtma ...