Vue父子组件实现数据‘双向绑定’的传参方法。（适用多个v-model）

最新推荐文章于 2024-05-26 22:57:35 发布

Manggoo

最新推荐文章于 2024-05-26 22:57:35 发布

阅读量1.5k

点赞数

分类专栏： d 文章标签： v

本文链接：https://blog.csdn.net/q275757160/article/details/88973393

版权

本文介绍了如何在Vue中通过v-model和sync修饰符实现父子组件之间的数据双向绑定。当需要传递多个v-model时，利用Vue的sync语法糖可以简化代码并达到相同效果。详细操作步骤及官方文档链接已提供。

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

<div class="topLine">
        <singler :date.sync="date" :name='"统计周期"'></singler>
        <singler :name='"变压器"' :devices='devices' v-model='device'></singler>
</div>

父组件代码如上。

子组件代码如下。

// 使用组件时，如果是选择器，则使用v-model绑定值，如果是输入框或者日期选择器，是v-bind:xxx.sync 
<template>
    <div class="singler">
        <span v-if='name'>{
  {name}}：</span>
        <el-select @change="$emit('changeDevice',$event)" v-if='devices' :popper-append-to-body=true :value="device" popper-class='singler_select'>
            <el-option v-for="item in devices" :key="item.id" :label="item" :value="item"&