<template>
<section>
<div class="list_props"
@click="changeProp_Sync">组件内部的value(可点击): {{ value }}</div>
</section>
</template>
<script lang="ts">
import { Vue, Component, PropSync } from 'vue-property-decorator';
@Component
export default class PropSyncComponent extends Vue {
// 原写法
// props: {
// name: {
// type: String;
// };
// };
// computed: {
// innerName:{
// get(){
// return this.name
// },
// set(value){
// this.$emit('update:name', value)
// }
// }
// }
// 现写法 一个public属性propA,使用PropSync装饰器,对外的prop是name,配置是{ type: String }
@PropSync('propSyncA', { type: Boolean }) value!: boolean;
private changeProp_Sync() {
this.value = !this.value;
}
}
</script>
vue2+ts配合PropSync的使用
最新推荐文章于 2024-01-22 11:06:04 发布