@Prop ?父子組件之間傳值

Install:

npm install --save vue-property-decorator

Child:

<template><div>{{fullMessage}}</div> </template><script lang="ts">import Vue from 'vue' import {Component, Prop} from 'vue-property-decorator'@Component({}) export default class Child extends Vue {message: string = "Hello";@Prop({type: String,default: 'Default Value'}) msg: string;get fullMessage() {return `${this.message},${this.msg}`;} } </script>

Parent:

<template><div class="hello"><h1 v-colorDirective="{color: 'red', backgroundColor: 'blue'}">{{ message }}</h1><button @click="clicked">Click</button><ChildComp msg="'What a good day!'"/><router-link to="/hello-ts">Hello Ts</router-link></div> </template><script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' import colorDirective from '../color-directive';import ChildComp from './Child.vue';@Component({directives: {colorDirective},components: {ChildComp} }) export default class Hello extends Vue {message: string = 'Welcome to Your Vue.js App'get fullMessage() {return `${this.message} from Typescript`}created() {console.log('created');}beforeRouteEnter(to, from, next) {console.log("Hello: beforeRouteEnter")next()}beforeRouteLeave(to, from, next) {console.log("Hello: beforeRouteLeave")next()}clicked() {console.log('clicked');} } </script>

?

@Model ?數據雙向綁定

Checkbox:

<template><div><input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}}</div> </template><script lang="ts"> import Vue from 'vue' import { Component, Prop, Model } from 'vue-property-decorator' @Component export default class MyCheckbox extends Vue {@Prop() label: string@Prop() id: string@Prop()@Model('change') checked: booleanchanged(ev) {this.$emit('change', ev.target.checked)} } </script>

Parent Component:

<template><div><MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/>{{JSON.stringify(checkbox)}}</div> </template> <script lang="ts">import Vue from 'vue' import {Component} from 'vue-property-decorator' import MyCheckbox from './MyCheckBox.vue'@Component({components: {MyCheckbox} }) export default class HelloTs extends Vue {checkbox = {label: 'Fancy checkbox',id: 'checkbox-id',checked: true} } </script>

@Watch ?監聽數據變化

<template><div class="hello"><button @click="clicked">Click</button> {{sum.acum}}</div> </template><script lang="ts"> import Vue from 'vue' import {Component, Watch} from 'vue-property-decorator'@Component({ }) export default class Hello extends Vue {sum = {acum: 0}@Watch('sum', {deep: true})watchCount(newVal, oldVal) {console.log("newVal", newVal, "oldVal", oldVal)}clicked() {this.sum.acum++;} } </script>

@Provide ?提供 ?/ ?@Inject ?注入

當您希望從父組件到子組件提供一些服務或數據時，您可以使用@Provide和@Inject。

Parent component:

<template><div class="hello"><ChildComp :msg="'What a good day!'"/></div> </template><script lang="ts"> import Vue from 'vue' import {Component, Provide} from 'vue-property-decorator'import ChildComp from './Child.vue';@Component({ }) export default class Hello extends Vue {@Provide('users')users = [{name: 'test',id: 0}]} </script>

Child:

<template><div>{{users}}</div> </template><script lang="ts">import Vue from 'vue' import {Component, Inject} from 'vue-property-decorator'@Component({}) export default class Child extends Vue {message: string = "Hello";@Inject('users') users; } </script>

在 TypeScript 中創建 自己的修飾器

定義一個修飾器：

const Log = (msg) => {return createDecorator((component, key) => {console.log("#Component", component);console.log("#Key", key); //logconsole.log("#Msg", msg); //App}) }

使用：

@Log('fullMessage get called') get fullMessage() {return `${this.message} from Typescript` }

輸出：

#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…} #Key fullMessage #Msg fullMessage get called

.

總結

以上是生活随笔為你收集整理的vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。