使用v-model实现父子数据双向绑定

场景：面板的收起与展开功能。

效果：

 

 

页面结构：

// 父级
 <p>物资保障
        <ZoomBtn v-model="shrinkCurPageFlag"></ZoomBtn>
  </p>
  <div v-show="!shrinkCurPageFlag">
  .......
  </div>  
  ....
  
private shrinkCurPageFlagb = false; 

 

 @Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})

• event: string类型，表示事件名
• options: PropOptions | Constructor[] | Constructor与@Prop的第一个参数一致；

export default class ZoomBtn extends Vue {
  @Model('change', { type: Boolean }) private value!: boolean;
}

子组件内容：

<template>
  <div class="zoomBtn">
    <i v-if="expanded" :class="expanded? 'narrow-on' : 'narrow'" @click="changeExpand"></i>
  </div>
</template>


<script lang="ts">
import {Component, Vue, Model} from 'vue-property-decorator';
 
@Component
export default class ZoomBtn extends Vue {
   @Model('change', { type: Boolean }) private value!: boolean;
   private changeExpand(event): void {
     this.$emit('change', this.expanded); 
   }
   private created() {
   // 这里的value就是父子v-model传过来的prop值。
     this.expanded = this.value;
   }
}

这样子级就可以把修改的值传给父级用了。

参考：

https://blog.csdn.net/sllailcp/article/details/102542796/

https://github.com/kaorun343/vue-property-decorator#Model