亲宝软件园·资讯

展开

浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

古兰精 人气:0

一、vue2 中 sync 修饰符的功能在 vue3 中如何呈现?

1、sync 修饰符回顾

1、vue 规则:props 是单向向下绑定的,子组件不能修改 props 接收过来的外部数据。

2、如果在子组件中修改 props ,Vue会向你发出一个警告。(无法通过修改子组件的props来更改父组件。)而若需要在子组件更新数据时通知父组件同步更新,需要结合 $emit 和 v-on 实现。

3、而sync修饰符的作用则是简化事件声明及监听的写法。

  如下例子,比较sync和正常修改数据通知外层的写法:可以看到 sync 修饰符确实简便了许多。

// 父组件
<template>
    <div> 数量: {{num}}</div>
    <!-- <ChildComponent :num="num" @increase="num = $event"/> -->
    <ChildComponent :num.sync="num" />
</template>

//子组件
<template>
    <div @click="addNum"> 接收数量: {{num}}</div>
</template>
<script>
export default {
    props: ['num'],
    // data() {
    //    return {
    //        childNum: this.num
    //    }
    // },
    methods: {
        addNum() {
            // this. childNum++
            // this.$emit('increase', this. childNum)
            this.$emit('update:num', this.num + 1)
        }
    }
}

2、sync 的语法糖功能在vue3中如何编写使用?

  vue3 中,通过 v-model:propName 实现自定义组件间数据的双向绑定。使用方法:

(1)父组件通过 “v-model:绑定的属性名” 传递数据属性,支持绑定多个属性;

(2)子组件配置emits,通过 “update:属性名” 的格式定义更新事件

二、如何通过v-model实现父子组件的双向数据绑定

  Vue3父子组件双向数据绑定写法做了些许改变,同时也支持多个数据双向绑定

1、单个数据双向绑定

// 父组件
// v-model 没有指定参数名时,子组件默认参数名是modelValue
<ChildComp v-model="search" />

  需要注意的是:

(1)子组件也并不是直接拿 props 传的变量直接用,而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。

(2)且如果父组件传的是异步数据的话,还需要对其进行监听。

(3)当子组件数据改变时需要通过 emit('update:modelValue', e) 去修改父组件数据实现双向绑定。

<template>
  <div>
    <input v-model="sea" @input="valChange(sea)" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  name: 'ChildComp',
  props: {
    modelValue: { // 父组件 v-model 没有指定参数名,则默认是 modelValue
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // input初始化
    const sea = ref(props.modelValue)
    // 如果父组件传过来的数据是异步获取的,则需要进行监听
    watch(() => props.modelValue, () => { sea.value = props.modelValue })
    // 数据双向绑定
    function valChange (e: string) {
      emit('update:modelValue', e)
    }
    return {
      sea,
      valChange
    }
  }
})
</script>

2、多个数据双向绑定 - 与单数据绑定差别不大

// 父组件
<ChildComp v-model="search" v-model:address="addr" />
// 子组件对应为
props: {
  modelValue: { // 父组件 v-model 没有指定参数名,则默认是 modelValue
    type: String,
    default: ''
  },
  address: {  // 父组件 v-model 有指定参数名,则是指定参数名
    type: String,
    default: ''
  }
},

// input初始化
const sea = ref(props.modelValue)
const add = ref(props.address)
 
// 如果父组件传过来的数据是异步获取的,需要进行监听
watch(() => props.modelValue, () => { sea.value = props.modelValue })
watch(() => props.address, () => { add.value = props.address })
 
// 数据双向绑定
emit('update:modelValue', e)
emit('update:address', e)

3、利用 computed 简化父子组件双向数据绑定

  上面是通过 ref 声明响应式数据,其实可以通过 computed 计算属性的 get / set 去简化操作。如下:

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
const show = computed({
  get() {
    return props.modelValue
  },
  set(v) {
    emit('update:modelValue', v)
  }
})

加载全部内容

相关教程
猜你喜欢
用户评论