温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue自定义组件如何实现v-model双向绑定数据

发布时间:2021-10-08 11:26:45 来源:亿速云 阅读:181 作者:小新 栏目:开发技术

这篇文章给大家分享的是有关vue自定义组件如何实现v-model双向绑定数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件。

类似如下:

父组件

<common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'"  @checkChange="checkChange"></common-checkbox>
 /**
     * 接收子组件回传进行处理
     */
    checkChange(value) {
      this.goodsSelected=value//子组件数据赋值给父组件
    }

子组件

/**
     * 切换选中回传
     */
    toggleCheck(value) {
      this.$emit('changeCheck', value)//回传方法,把子组件变化后的数据回传给父组件处理
    }

但是这种写法需要调用公共组件的页面额外写处理的方法,而且显得太low,我们可不可以像是框架自带的公共组件一样去声明直接v-model双向绑定呢?接下来提供项目中实际遇到这种情况的处理方法

第一种方式:

正常情况下当你在父组件里给子组件绑定 v-model属性时,子组件中会默认的将 v-model绑定的数据,付给子组件 名为 value的props属性,value依然需要提前在子组件props中声明,否则接收不到。

当 value修改后,并不会立即双向回传给父组件。如果想回传实现同步更新父组件的v-model需要如下操作

 this.$emit('input', value)

当未声明双向绑定回传的事件时,默认通过input事件回传,为什么说 “当未声明双向绑定回传的事件”,这个便是第二种方式,下面会讲到。

简单来说,第一种方式的实现,首先是v-model绑定父组件数据 ,然后子组件value 的props属性自动接收,最后当数据更改后调用this.$emit('input', value) 回传父组件,这样父组件不需要额外实现子组件的回传就可以实现双向绑定

第二种方式:

前面提到 “当未声明双向绑定回传的事件” 默认使用 input回传,既然这样说了那就存在,如果我不用input呢?这就需要了解vue的一个特殊的属性:model,这个属性可以用来声明 子组件用哪个字段去接收双向绑定的数据,以及用哪个方法回调更新父组件v-model的数据,写法如下:

export default {
  name: 'CommonCkeckBox',
  model: {
    prop: 'checked',
    event: 'changeCheck'
  },
    props: {
    checked: {
      type: Boolean,
      default: false,
    }, // 选中状态
  }
  }

这种写法就意味着,父组件 双向绑定的数据会绑定到子组件名为checked的props属性,并且,当子组件调用this.$emit('changeCheck', value)时,会同步的更新父组件的数据,实现双向绑定。

接下来附一段自定义checkbox的代码以作参考:

<template>
<div class="check-box-container"  @click="toggleCheck()" :>
        <div class="checkbox-icon">
              <!-- 三种状态 选中  未选  禁用 -->
              <img alt :src="`${$cdnImageUrl}/cart/icon-selected.png`" :width="width" :height="height" key="select" v-if="checked&&!disabled"/>
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" key="unselected" v-if="!checked&&!disabled" />
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" class="disabled" key="unselected"  v-if="disabled"/>
            </div>
        <slot></slot>
</div>
</template>
<script>
/**
 * 全局统一弹窗
 */
export default {
  name: 'CommonCkeckBox',
  model: {
    prop: 'checked',
    event: 'changeCheck'
  },
  props: {
    checked: {
      type: Boolean,
      default: false,
    }, // 选中状态
    disabled: {
      type: Boolean,
      default: false,
    }, // 是否禁用
    width: {
      type: String,
      default: '16px',
    }, // 按钮默认宽度
    height: {
      type: String,
      default: '16px',
    }, // 按钮默认高度
  },
  created() {
  },
  data() {
    return {
    }
  },
  methods: {
    /**
     * 切换选中回传
     */
    toggleCheck() {
      this.$emit('changeCheck', !this.checked)
      this.$emit('toggleCheck')
    }
  },
  watch: {
    checked: {
      handler(newValue, oldValue) {
      // 开放状态变更事件
        this.$emit('onChange')
      },
      deep: true
    }
  },
}
</script>
<style lang="scss"  scoped>
.check-box-container{
    display: inline-block;
    .checkbox-icon{
        img{
          transform: translateZ(0);
          will-change: auto;
        }
        .disabled{
          background-color:#f5f5f5;
          border-radius: 50%;
        }
    }
}
</style>

父组件:

  <common-checkbox v-model="item.goodsSelected" class="left" :width="'16px'"  :height="'16px'"></common-checkbox>

具体用哪种方式根据项目场景选择,若第一种不满足需求,可以尝试第二种实现。

感谢各位的阅读!关于“vue自定义组件如何实现v-model双向绑定数据”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI