vue : 对 vue-class-component 的个人理解
vue-class-component 是 vue 的官方库,作用是用类的方式编写组件。
这种编写方式可以让.vue文件的js域结构更扁平,并使vue组件可以使用继承、混入等高级特性。
简单的示例:
ComponentA.vue
<template>
<div>
<p>{{ nameString }}</p>
<p>{{ child }}</p>
<button @click="comClick">button</button>
</div>
</template> <script>
import Vue from 'vue'
import Component from 'vue-class-component' @Component({
props: {
child: String
},
watch:{ },
components: { }
})
export default class ComponentA extends Vue {
// initial data
nameString = `ComponentA` // lifecycle hook
mounted () {
this.greet()
} // computed
get computedMsg () {
return 'computed ' + this.nameString
} // method
greet () {
console.log('greeting: ' + this.nameString)
} }
</script> <style> </style>
App.vue
<template>
<div id="app"> <component-a ref="a" :child="nameString" @com-click="fromChildEvent" /> </div>
</template> <script>
import Vue from 'vue'
import Component from 'vue-class-component'
import ComponentA from './ComponentA' @Component({
components: {
'component-a': ComponentA
}
})
export default class App extends Vue {}
</script> <style lang="less"> </style>
开始我并不理解这种全新的写法,心想:props watch components 写哪儿呢?
后来知道了,写在 @Component() 修饰器方法里。
关于js的修饰器可以参考这一篇文章。
=== 分割线 ===
那么,能不能让这几个被拿出来的东西也写到里面呢?
可以的。
vue-property-decorator 是一个非官方库,是 vue-class-component 的很好的补充。它可以让vue的某些属性和方法,通过修饰器的写法让它也写到vue组件实例的类里面。
比如 @Prop
@Watch
@Emit。
我们把 ComponentA.vue 文件 App.vue文件 稍微改一下。
ComponentA.vue
<template>
<div>
<p>{{ nameString }}</p>
<p>{{ child }}</p>
<button @click="comClick">button</button>
</div>
</template> <script>
import { Vue, Component, Emit } from 'vue-property-decorator' @Component({
props: {
child: String
},
watch:{ },
components: { }
})
export default class ComponentA extends Vue {
// initial data
nameString = `ComponentA` @Emit()
comClick() {
return {
nameString:this.nameString
}
} }
</script> <style> </style>
App.vue
<template>
<div id="app"> <component-a ref="a" :child="nameString" @com-click="fromChildEvent" /> </div>
</template> <script>
import Vue from 'vue'
import Component from 'vue-class-component'
import ComponentA from './ComponentA' @Component({
components: {
'component-a': ComponentA
}
})
export default class App extends Vue {
// initial data
nameString = `App` fromChildEvent (obj) {
console.log(obj)
alert("METHODS fromChildEvent")
} }
</script> <style lang="less">
</style>
我们用vue-property-decorator写了 @Emit() 。另外可能你也发现了,Vue、Component 也可以通过 vue-property-decorator 引入。
=== 分割线 ===
最后,有一个js公共修饰器库,core-decorators。
这个库提供了非常多的修饰器,用惯了大概可以提高开发效率。
不过需要注意:core-decorators 和 typescript 不兼容。
以上。
vue : 对 vue-class-component 的个人理解的更多相关文章
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- vue中央事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...
- Vue.mixin Vue.extend(Vue.component)的原理与区别
1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...
- [Vue] Dynamic Vue.js Components with the component element
You can dynamically switch between components in a template by using the reserved <component> ...
- Vue Vue.use() / Vue.component / router-view
Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue.use 直接调用这个函数注册组件 如果这个参数是对象的话,Vue.use 将调用 ins ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue系列---Vue组件化的实现原理(八)
_ 阅读目录 一. 什么是Vue组件? 如何注册组件? 1.1 全局注册组件 1.2 局部注册组件 二:组件之间数据如何传递的呢? 1) props 2) $emit 3) 使用$ref实现通信 4) ...
- vue学习:vue+webpack的快速使用指南(新手向)
一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...
- Vue 项目 Vue + restfulframework
Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...
- 【vue】vue +element 搭建及开发中项目中,遇到的错误提示
1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件ac ...
随机推荐
- Linux下搭建redis(源码编译)
[准备环境] Linux centos7 redis下载包 地址:http://www.redis.cn/download.html 前往下载稳定版本 [步骤] 1.下载成功后 把包上传到服务器 ...
- Beta冲刺<7/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第七天(05.25) 作业正文 如下 其他参考文献 ... B ...
- Buy a Ticket 【最短路】
题目 Musicians of a popular band "Flayer" have announced that they are going to "make t ...
- 半导体质量管理_Stargate
监控您的SPC活动 生产质量指标概述 应定期评估统计信息,以便您可以更好地利用统计过程控制.通过这种方式,您可以快速发现质量缺陷并采取适当的措施做出反应.LineWorks STARGATE提供了生产 ...
- Laytpl 1.2
https://jeesite.gitee.io/front/laytpl/index.html
- 关于延迟段创建-P1
文章目录 1 疑问点 2 环境创建 2.1 创建用户 2.2 创建表test 2.3 查看表的段信息 2.4 延迟段创建相关参数 1 疑问点 P1页有句话说道: 在Oracle 11.2.0.3.0以 ...
- mongodb安装与mongo vue的使用
首先,下载mongodb,然后安装 http://downloads.mongodb.com/win32/mongodb-win32-x86_64-enterprise-windows-64-2.6. ...
- 洛谷 P2220 [HAOI2012]容易题 数论
洛谷 P2220 [HAOI2012]容易题 题目描述 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数 ...
- python学习笔记之装饰器、生成器、内置函数、json(五)
一.装饰器 装饰器,这个器就是函数的意思,连起来,就是装饰函数,装饰器本身也是一个函数,它的作用是用来给其他函数添加新功能比如说,我以前写了很多代码,系统已经上线了,但是性能比较不好,现在想把程序里面 ...
- Qt-文件系统
1 简介 参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=45 参考文档:<Qt教程.docx> 说明:本文主要介绍Qt的文件系统. ...