@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.
)
