@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: boolean
changed(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); //log
console.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
.