vue ts 通过@Model混入mixins的方法双向绑定数据

80 阅读 0 评论 53 点赞

我是靠谱客的博主谦让黑米，最近开发中收集的这篇文章主要介绍vue ts 通过@Model混入mixins的方法双向绑定数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1 封装绑定的方法文件 twoVlaue/index.ts

通过双向绑定数据，便于在子组件直接修改父组件绑定数据值。也可以通过ts修饰符@Emit绑定修改的方法

import { Vue, Component, Prop, Model } from "vue-property-decorator";
/**通过Mixin：双向绑定*/
@Component
export default class TwoValue extends Vue {
@Prop()
@Model("valueHandle")
bindVal!: any;
/**双向绑定数据方法1. 2. */
// 1.
get currentVal(): any {
return this.bindVal;
}
// 2.
set currentVal(value) {
this.$emit("valueHandle", value);
}
}

2 父组件中传值文件A.html

<template>
<!-- 父组件 -->
<div class="boxFather">
<!-- 子组件 -->
<Childe v-model="dateHandle"></Childe>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Childe from "./B.html";
@Component({
Components: {
Childe
}
})
export default class Father extends Vue {
// 实例数据date
dateHandle = { a: "父子组的绑定值", b: "from" };
}
</script>

3 子组件引用双向绑定的方法并使用

<template>
<!-- 子组件 -->
<div class="son">
<div>在子组件使用和修改父组件绑定的值===》 {{ currentVal }}</div>
<span @click="update"></span>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import bindTwoValue from "./twoVlaue"; // 引入混入双向绑定的值
@Component()
export default class Son extends Mixins(bindTwoValue) {
dateHandle = { a: "父子组的绑定值", b: "from" };
// 子组件中修改绑定值
update() {
// 通过混子取绑定值
this.currentVal = {
a: "修改",
b: "FormData"
};
}
}
</script>

-----------------------------------个人练习使用，可个人根据需求调整使用--------------------------------