Vue3 学习笔记

1、 .sync 、v-model

Vue2中的.sync修饰符在vue3中取消了，取而代之的是v-bind 和 defineEmits。

父组件

<template>
	<modify :visible="visible" @update:visible="visible = $event" />
	<!-- 或者 -->
	<modify v-model:visible="visible" />
</template>

子组件

<script lang="ts" setup>
  import { ref } from 'vue';
  
 defineProps<{
    visible: boolean,
  }>();
  const emit = defineEmits(['update:visible']);

  const afterClose = () => {
    emit('update:visible', false);
  };
</script>

2、$attrs 额外数据绑定

Vue2中父组件传入的数据与方法需要分别使用 v-bind 和 v-on 来绑定。
Vue3中我们只需要使用 v-bind="$attrs" 即可，Vue会自动帮我们把方法和数据区分出来