详解TypeScript+Vue 插件 vue-class-component的使用总结
首先 下载
npm install vue-class-component vue-property-decorator --save-dev
一梭子直接干；
其次，咱来说说它们的区别与联系：
vue-property-decorator社区出品；vue-class-component官方出品
vue-class-component提供了Vue、Component等；
vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；
开发时正常引入vue-property-decorator就行
引入后写vue代码就是如此，
import {Component, Prop, Vue} from 'vue-property-decorator'
@Component
export default class App extends Vue {
name:string = 'Simon Zhang'
// computed
get MyName():string {
return `My name is ${this.name}`
}
// methods
sayHello():void {
alert(`Hello ${this.name}`)
}
mounted() {
this.sayHello();
}
}
相当于
export default {
data () {
return {
name: 'Simon Zhang'
}
},
mounted () {
this.sayHello()
},
computed: {
MyName() {
return `My name is ${this.name}`
}
},
methods: {
sayHello() {
alert(`Hello ${this.name}`)
},
}
}
大佬都说爽的一批；
然鹅菜鸟我遇到问题一堆，以下做个积累总结：
1、写法问题：引入组件和接收父组件传过来的参数
@Component({
components: {
XXXX
},
props: {
mapFlag: Number
}
})
2、获取refs，在其后面加上as HTMLDivElement（不知道是不是这插件引起的，懒得管，直接干就是）
let layoutList:any = this.$refs.layout as HTMLDivElement
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue component组件使用方法详解，包括了vue component组件使用方法详解的使用技巧和注意事项，需要的朋友参考一下 什么是组件 按照惯例，引用Vue官网的一句话： 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件
-
本文向大家介绍详解vue slot插槽的使用方法，包括了详解vue slot插槽的使用方法的使用技巧和注意事项，需要的朋友参考一下 官方文档其实已经讲得很详细，我根据文档，把官方的小案例实现了一下，这样更直观 单个slot使用最简单，也是最常用的，当我们定义了一个子组件，父组件在使用的这个组件的时候，想在内部自定义一些初始化数据，这时候就可以用slot实现。 具名slot只是给slot加了name
-
本文向大家介绍vue微信分享插件使用方法详解，包括了vue微信分享插件使用方法详解的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了vue微信分享插件的使用方法，供大家参考，具体内容如下 1.安装weixin-js-sdk 2.创建文件并引入 在src下创建common目录 在common目录下创建wxshare.js 3.在wxshare.js中编写插件 4.在需要分享页面编写 以上就是
-
本文向大家介绍Vue二次封装axios为插件使用详解，包括了Vue二次封装axios为插件使用详解的使用技巧和注意事项，需要的朋友参考一下 照例先贴上 axios 的 gitHub 地址 不管用什么方式获取数据，对于一个项目来说，代码一定要利于维护其次是一定要写的优美，因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource，vuejs2.0 已经使用了 axios,这也
-
组件注册 Vue.component('my-component-name', { /* ... */ }) 强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。 全局注册 Vue.component('my-component-name', { // ... 选项 ... }) 局部注册 var Compo
-
本文向大家介绍IDEA安装vue插件图文详解，包括了IDEA安装vue插件图文详解的使用技巧和注意事项，需要的朋友参考一下 非常详细的IDEA安装vue插件的方法，供大家参考，具体内容如下 1.idea上面安装vue插件 （到这里idea安装vue插件就好了，接下来我们开始搭建我们后台管理系统） 2.利用vue搭建后台管理系统，这边我们直接用半成品来搭建后台管理系统。这边我们首先克隆GitHub项