vue 中provide的用法_vue+ts项目vue-property-decorator（装饰器）用法

在vue项目使用ts时，装饰器有以下几种，下面为这些装饰器的具体用法并且有和js中写法的对比：

@Component

@Emit

@Prop

@Watch

@Model

@Inject / @Provide

Mixins

下面为具体代码：

1.@Component

ts中引入组件components写在@Component中，如下：

parent组件--{ {title}}

---

import Home from './Home.vue'

import About from './About.vue'

import { Component, Vue } from 'vue-property-decorator';

@Component({

components: {

Home,

About

}

})

export default class extends Vue {

private title: string = '父组件中的值'

}

复制代码

下面为在js中引入组件components的写法，与上面ts的代码效果一样：

import Home from './Home.vue'

import About from './About.vue'

export default {

data() {

return {

title: '父组件中的值'

}

},

components: {

Home,

About

}

}

复制代码

2.@Emit

ts中@Emit的用法如下：

vue+ts项目vue-property-decorator用法

---

触发emit

import { Component, Vue, Emit } from 'vue-property-decorator';

@Component({})

export default class Home extends Vue {

private mounted() {

this.$on('demo-log', (data: any): void => {

alert(data)

})

}

@Emit('demo-log')

triggerEmit(n: any) {

console.log('hhh')

}

}

复制代码

下面为@Emit的另一种写法࿰