vue3 语法糖 等 零碎知识点 记录

setup 语法糖

Vue3.2中的setup语法糖

defineProps、defineEmits

补充 defineModel – 父子 组件 同时 可以 双向绑定 v-model 同一个数据源

父组件 v-model传值给 子组件 子组件 Props（modelValue）接收 子组件 值变化 emit(“@update:modelValue”,newValue)

定义父级组件

<template>
	<Comp v-model="msg" />
</template>

<script setup>
import { ref } from 'vue'
import Comp from "./Comp.vue"
  
const msg =ref(true)
</script>

定义子组件 – 将原来的defineProps改为defineModel

<template>
  <input type="checkbox"  checked=true  v-model="msg" />
</template>
<script setup>
import { ref,defineModel } from 'vue'

const msg=defineModel()
</script>

inheritAttrs – 传给子组件的属性

值部分 除了 props定义的 $attrs 兜底接收

元素节点 子组件有多层嵌套 inheritAttrs:true 父传递的值会绑在根节点 inheritAttrs:false 不会绑在根节点

一般用在 子组件是 input这种 有很多属性（type placeholder）且外层还有嵌套 的布局

子

父