vue3使用useVModel实现双向数据绑定v-model指令

最新推荐文章于 2024-06-25 21:47:05 发布

baby加油_

最新推荐文章于 2024-06-25 21:47:05 发布

阅读量3.3k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_34664239/article/details/129174745

版权

vue 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

文章详细介绍了在Vue组件中如何实现双向数据绑定，首先讲解了传统方式，通过v-model、props和watch来传递和监听数据变化。然后引入了useVModel，这是一个来自@vueuse/core库的工具，简化了在子组件中处理v-model的过程，使得数据绑定更加便捷。

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

在使用useVModel之前，实现双向数据绑定

父组件传一个变量值，用v-model去传，v-model="isChecked"默认传的是modelValue，如果想要改变传的变量名，可以用在v-model后面加:变量名—v-model:变量名="isChecked"
在子组件可以使用props来接收父组件传过来的值，且默认定义为modelValue（如果父组件定义了变量名，这里要用父组件定义的变量名接收变量），然后在watch来侦听数据，将接收过来的值 props.变量名 赋给子组件定义的变量，当这个变量发生改变的时候，emit('update:变量名', newVal)

示例：多选框

//父组件：定义一个响应式数据 isChecked ，给一个默认值，传给子组件
 <XtxCheckbox v-model:checkedVal="isChecked">仅显示有货商品</XtxCheckbox>{{ isChecked }}
setup () {
  const isChecked = ref(true)
  return { isChecked }
}

//子组件--这里定义一个名为checked的响应式数据接收父组件传过来的值，在changeChecked方法中去修改checked的值，并且将新的值传递给父组件。
import { ref, watch } from 'vue'
export default {
  name: 'XtxCheckbox',
  props: {
    checkedVal: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    // 组合API :modelValue @update:modelValue
    const checked = ref(false)
    const changeChecked = () => {
      // 修改值
      checked.value = !checked.value
      // 传值
      emit('update:checkedVal', checked.value)
    }
    // 监听接收值
    watch(() => props.checkedVal, (newVal) => {
      checked.value = newVal
    }, { immediate: true })
    return { checked, changeChecked }
  }
}

useVModel

// 使用useVModel实现双向数据绑定v-model指令

使用props接收modelValue
使用useVModel来包装props中的modelValue属性数据
再使用checked.value就是使用父组件数据
再使用checked.value = ‘数据’ 赋值，自动触发emit(‘update:modelvalue’, ‘数据’)

import { useVModel } from '@vueuse/core'
export default {
  name: 'XtxCheckbox',
  props: {
    checkedVal: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    //  useVModel用法
    const checked = useVModel(props, 'checkedVal', emit)
    const changeChecked = () => {
      checked.value = !checked.value
    }
    return { checked, changeChecked }
  }
}