v3 v-model语法糖

最新推荐文章于 2024-05-09 10:19:41 发布

MMNHD

最新推荐文章于 2024-05-09 10:19:41 发布

阅读量212

点赞数

文章标签： javascript vue.js java

本文链接：https://blog.csdn.net/m0_63327154/article/details/130292285

版权

父组件

<template>
  <div>
    <!-- 语法糖 -->
    <!--     v-model:show="show"  替代vue2里的sync修饰符update:show -->
    <!-- v3可写多个v-model -->
    <Son v-model="count" v-model:show="show"></Son>
    <!-- 完整写法 -->
    <!--    <Son :modelValue="count"
    @update:modelValue="count=$event"
    ></Son> -->
  </div>
</template>

<script setup>
import Son from './son.vue'
import { ref } from 'vue'
let count = ref(1)
let show = ref(false)

</script>
 
<style lang="scss" scoped>
</style>

子组件

<template>
  <div>
子子----------------{ {{modelValue}} }
<button @click=" emit('update:modelValue',99)">点我</button>
  </div>
  <div>
    <p v-show="show">隐藏显示</p>
    <button @click="emit('update:show',!show)">修改show</button>
  </div>
</template>

<script setup lang="ts">
defineProps<{ modelValue: number,show:boolean }>()
//定义自定义事件
const emit=defineEmits<{
  (e: 'update:modelValue', data: number): void,
  (e:'update:show',data:boolean):void 
}>()


</script>

<style lang="scss" scoped>

</style>