- Vue.js 2 Design Patterns and Best Practices
- Paul Halliday
- 167字
- 2021-06-24 18:33:06
Properties
We've seen how we can create classes and use the Component decorator; let's now take a look at how we can define "props" inside of our class using the vue-property-decorator:
# Install Vue Property Decorator
npm install vue-property-decorator --save-dev
This depends on the vue-class-component, so anytime we install vue-property-decorator you'll need to ensure vue-class-component is also installed. Let's then define a Component property using the @Prop decorator:
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
// Omitted
@Component({
})
export default class App extends Vue {
@Prop({ default: 'Paul Halliday' }) name: string;
}
</script>
Notice how we're now importing the Component from 'vue-property-decorator' instead of vue-class-component. This is because it exports this as a module for us to import. We're then defining a new component property with the key of name and the default value of 'Paul Halliday'; prior to using TypeScript, it would have looked as follows:
export default {
props: {
name: {
type: String,
default: 'Paul Halliday'
}
}
}
推薦閱讀
- Hands-On Full Stack Development with Spring Boot 2 and React(Second Edition)
- 局域網組建、管理與維護項目教程(Windows Server 2003)
- 通信簡史:從信鴿到6G+
- 互聯網安全的40個智慧洞見:2015年中國互聯網安全大會文集
- Socket.IO Real-time Web Application Development
- 網絡基礎與網絡管理項目化教程
- 網絡環境中基于用戶視角的信息質量評價研究
- Working with Legacy Systems
- 網絡設計與應用(第2版)
- 端到端QoS網絡設計
- 大型企業微服務架構實踐與運營
- INSTANT LinkedIn Customization How-to
- 物聯網與智慧農業
- 網絡安全之道
- 智慧城市中的物聯網技術