vue 利用v-model语法糖封装组件并实现＜component＞动态组件

最新推荐文章于 2025-03-04 22:09:57 发布

敲完这个我就再也不熬夜了

最新推荐文章于 2025-03-04 22:09:57 发布

阅读量1.6k

点赞数 2

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41206305/article/details/126100404

版权

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文探讨了v-model的实现原理，通过示例展示了如何利用v-model进行组件封装，以及如何在动态组件中使用v-model。在组件封装中，v-model被用于在父组件和子组件之间实现数据的双向绑定。而在动态组件场景下，v-model语法糖使得不同类型的组件（如ElInput和ElSwitch）能够统一处理数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model实现原理

v-model双向绑定实际就是数据绑定+事件绑定的一个语法糖

<input type="text"
           v-model="inputVal">
/* 等价于*/
<input type="text"
           v-on:value="inputVal"
           @input="inputVal=$event.target.value">

v-model 封装组件

我们可以利用v-model的实现原理对组件进行封装

//父组件
<AddCount v-model="count"></AddCount>
/*相当于*/
<AddCount v-bind:count="count" v-on:change="count=$event.target.count"></AddCount>
//子组件
<template>
  <div>
    <input type="text"
           @input="handleChange"
           v-model="inputVal">
    <span>{{inputVal}}</span>
  </div>
</template>
<script>
export default {
    name: "AddCount",
    model: {//修改v-model映射关系
        value: "count",
        event: "change"
    },
    props: {
        count: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            inputVal: undefined
        };
    },
    created() {
        this.inputVal = this.count;
    },
    methods: {
        handleChange() {
            this.$emit("change", this.inputVal);
        }
    }
};
</script>

<component > 动态组件

利用v-model语法糖封装组件并实现动态组件主要是为了统一渲染element组件和自定义组件

<template>
  <div>
    <component v-for="item in tabs"
               :key="item.key"
               v-model="item.data"
               :is="item.component"//动态渲染的组件名称
               v-bind="item.props || {}"></component>
  </div>
</template>
<script>
import AddCount from "./addCount.vue";
export default {
    components: { AddCount },
    data() {
        return {
            tabs: [
                {
                    key: "tab1",
                    data: undefined,
                    component: "ElInput"
                },
                {
                    key: "tab2",
                    data: undefined,
                    component: "ElSwitch"
                },
                {
                    key: "tab3",
                    data: undefined,
                    component: "ElInput"
                },
                {
                    key: "tab4",
                    data: undefined,
                    component: "AddCount"
                }
            ]
        };
    },
};
</script>