@Component({ data() { bar: 1 }, methods: { say(){ console.log("say::@Component"); } } }) export default class App extends Vue { public bar: number = 2; // 这里的bar会被@Component中定义的bar覆盖掉 public say() { // 这里的say()方法会覆盖掉@Component中定义的say方法 console.log("say::class"); } }
还有一点要注意的是,@Component装饰器千万不要漏写,必须在组件类class前修饰
⑧ props属性的写法,使用ts写Vue组件的时候,如果要在组件上定义props属性,那么必须通过@Prop()装饰器,其实就是在定义组件data属性的时候用@Prop()装饰器进行修饰,如果没有通过@Propp()进行修饰,那么定义的属性就是组件的data属性,可以给@Prop()传递一个配置对象,可以定义传递属性的default、required、type等属性,如:
import { Component, Vue, Prop } from 'vue-property-decorator'; @Component // 不要忘了用@Component修饰组件class哟 export default class HelloWorld extends Vue { @Prop() public bar!: string; // 这里定义的是props属性 public foo = "foo"; // 这里定义的是data属性 @Prop({type: String, default:"foo", required: true}) public foo!: string; } </script>
需要注意的是,public foo!: string,这里声明的string类型是不起作用的,要限定父组件传入的foo属性的数据类型,必须在@Prop()装饰器内限定数据类型,否则无效
⑨ @Emit()装饰器的使用,在子组件发射自定义事件的时候通常会通过this.$emit("say")的方式,但是typescript提供了一个@Emit()装饰器,用于修饰一个方法,当这个方法被执行的时候,就会在方法执行完成后发射一个同方法名的事件出去,当然,这是在没有给@Emit()传递参数的情况下,如果给@Emit()传递了参数,那么就会发射指定参数的事件,如:
export default class HelloWorld extends Vue { @Emit() // 在say()方法执行完成后会发射一个同方法名的say事件 public say() { } @Emit("speak") // 这里给@Emit()传递了参数,则会发射speak事件 public say() { } }
⑩ @Watch()装饰器的使用,其拥有监听组件中数据的变化,就相当于$watch,需要给其传递一个字符串参数,表示其监听的是哪个数据的变化,如:
@Watch("foo") // 监听this.foo的变化 public add(newValue: number, oldValue: number) { console.log(`newValue is ${newValue}, oldValue is ${oldValue}`); }
四、vuex中的变化
vuex中的数据是存放在state属性上的,如果要限定state中数据的属性和类型,那么我们必须在创建store对象的时候定义一个接口限定一下数据类型,如:
interface IState { lists: string[] } export default new Vuex.Store<IState>({ state: { lists: ["vue"] // 定义了state的数据结构,必须要有lists属性,并且属性值为string[] } });
获取vuex中的数据时候,还是可以通过this.$store.state.lists获取到,但是我们也可以通过装饰器获取到,要使用vuex的装饰器,我们需要安装vuex-class,如:
import {State, Mutation, Action} from "vuex-class"; export default class App extends Vue { // 将从vuex中获取到的lists数据保存到组件的lists属性上 @State("lists") public lists!: string[]; @Mutation("say") // 在say()方法前修饰,当say()方法执行的时候就会提交一个say mutation public say() { console.log("say1"); } @Action("speak") // 在speak()方法前修饰,当speak()方法执行的时候就会提交一个speak action public speak(){ } public mounted () { this.say(); this.speak(); } }