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

最新推荐文章于 2024-01-11 14:31:05 发布

阿东toastLi

最新推荐文章于 2024-01-11 14:31:05 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端 typescript vscode

本文链接：https://blog.csdn.net/toastRouter/article/details/123086720

版权

这篇博客介绍了如何在Vue.js中实现双向绑定，通过`@Prop`和`@Model`装饰器在子组件中修改父组件的数据，并通过混入（Mixins）方式在子组件中使用。示例展示了一个父组件（Father）如何将数据传递给子组件（Son），子组件如何修改并更新这些数据。内容涵盖了Vue的组件通信和数据绑定原理。

摘要由CSDN通过智能技术生成

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>

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