vue单文件组件data选项的函数体获取vue实例对象
因配置的关系,导致 vue的data选项中存在事件。而事件无法获取 vue 的实例对象;项目是单文件形式的,以下代码只是例子
new Vue({
el:...,
data:{
a: {
onevent:function(){
//由于a是某个插件的根对象,所以这里无法获取 vue 的实例对象
}
}
}
})
方法一:
参考export用法文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
export default (()=>{
let defaultVue = {
data: {
a:{
b: function(){
// 这里可以使用defaultVue这个对象,不过,这里使用的就是js的对象,只能通过 defaultVue.data.propertyName 来获取值
}
}
}
};
return defaultVue;
})()
方法二(推荐):
vue Data选项的文档可以看一下:https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95
主要知道 想要vue的响应式驱动的方式的话,就在 data选项里声明一个 属性即可,再然后就需要了解一下 vue的声明周期了
第一步:


这里的 bind 方法,可以去 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 这里看看,bind方法的意思就是绑定指定的上下文(注意,是bind返回的函数才绑定到你指定的上下文了,不会修改原函数的)
然后就 ok 了,这样就不需要声明全局的变量保存 vue实例了,不容易啊,琢磨近一天了
vue单文件组件data选项的函数体获取vue实例对象的更多相关文章
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
随机推荐
- Python 中线程和进程
目录 线程和进程 一. 什么是进程 / 线程 1. 引论 2. 线程 3. 进程 4. 区别 5. 使用 二. 多线程使用 1. 常用方法 2. 常用参数 3. 多线程的应用 3.1 重写线程法 3. ...
- 企业环境下用脚本设置ubuntu防火墙
ubuntu防火墙设置 初始状态下直接设置即可,尽量不要尝试 重装 iptables 以及ufw,很容易导致 防火墙崩掉,最后可能只能重装系统. 配置脚本 firewall.sh #/bin/bash ...
- 【windows 操作系统】窗口指针 和 窗口句柄 有什么区别
句柄是指针的"指针" 指针对应着一个数据在内存中的地址,得到了指针就可以自由地修改该数据.Windows并不希望一般程序修改其内部数据结构,因为这样太不安全.所以Windows给每 ...
- 命令行窗口cmd:访问C盘根目录和其他盘
1:访问C盘: cd.. 往前推一个目录 以此类推,多用几次cd..即可退回到根目录 2:访问桌面文件夹 由于cmd命令行中>号的存在我们不能直接访问其他文件,所以用cd将>删去 所以 用 ...
- Java:常用语句
学习时可参考: Java在线文档(中文版) Java官方文档(英文版) 0.基本 0.1.导入某个Module import java.util.List;import java.util.Array ...
- 千万级 PV是什么意思?
首先介绍下pv的概念: PV(访问量):即Page View,页面刷新一次算一次. UV(独立访客):即Unique Visitor,00:00-24:00内相同的客户端只被计算一次. IP(独立IP ...
- gcc与g++区别;编译选项
gcc与g++区别:可以相互编译,但是gcc不会自动进行c++的链接 gcc g++编译选项: -E 预处理 -S 编译指定源文件但是不尽兴汇编 -c 编译汇编,但是不进行链接 -o 编译成可执行文件 ...
- Python中的super().__init__()
Python里的super().init()有什么用? 简单的说super().__init__(),就是继承父类的init方法,同样可以使用super()去继承其他方法. 下面是三种不同的继承.调用 ...
- tp5 webupload文件上传至七牛云
1:composer安装: composer require qiniu/php-sdk 2: 配置使用: 在tp5.1的配置文件app.php中配置七牛云的参数 'qiniu' => [ 'a ...
- rsync同步文件到远程机器,卡住10多秒--问题解决过程
背景 以前大体介绍过,我们这边是做运维平台的.如果要形象化理解,那么,比如jenkins这种喜闻乐见的软件大致了解吧,jenkins就经常需要同步文件/版本包到远程机器上,jenkins怎么实现的,没 ...