vue3的双向绑定

Vue 2022-08-19 1191

1. 父组件 

v-model:current-page-num 是多属性时使用,单个值可以使用v-model="",相应的子组件的props指定为modelValue,emit中的事件为update:modelValue

<template>
   <CommonInfo v-model:current-page-num="currentPage"></CommonInfo>
</template>

<script setup lang="ts">

const currentPage = ref(0)
<script>

2. 子组件

<template>
<div class="pagination-wrapper">
    <el-pagination v-model:current-page="currentPage" :total="total" hide-on-single-page layout="prev, pager, next"></el-pagination>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  // 页码
  currentPageNum: {
    type: Number,
    default: 1,
  },
})

const emit = defineEmits(["update:currentPageNum"])
const currentPage = computed({
  get: () => {
    return props.currentPageNum
  },
  set: (v: number) => {
    emit("update:currentPageNum", v)
  },
})
</script>

 

标签:Vue

文章评论

评论列表

已有0条评论