朱丽叶

导航

vue3 + Ts中赋值组件之间的双向绑定

// 父组件
/**
 * <tables v-model="dataPagination"></tables>
 * 自定义组件上的 v-model 相当于传递了 modelValue prop
 * 接收抛出的 update:modelValue 事件:
 * 
 * 
 * 若需要更改 model 的名称,现在我们可以为 v-model 传递一个参数,以作为组件内 model 选项的替代:
 * <tables v-model:pagePagin="dataPagination"></tables>
 * 
 */
<template>
  <tables v-model:pagePagin="dataPagination"></tables>
</template>


// 子组件
<script lang="ts" setup>
  // 未给属性添加了别名
  const emit = defineEmits(['update:Value'])
  emit('update:Value', { ...props.pagePagin, pageSize })


  // 给树属性加了别名
  const emit = defineEmits(['update:pagePagin'])
  emit('update:pagePagin', { ...props.pagePagin, pageSize })
</script>

posted on 2022-06-27 00:09  朱丽叶  阅读(1134)  评论(0编辑  收藏  举报