defineProps

一，前言

1.在vue2中，我们使用选项api中的props来接受父组件传递来的数据。

2.在vue3的setup中，我们使用defineProps来定义父组件传递的props

二，`defineProps`介绍

1.defineProps是vue3的一个宏函数，使用时可不导入

2.defineProps是一个函数，参数与vue2的props选项相同

defineProps({msg:String,name:{type:String,require:true,default:'xxxx'}
})

3.定义后props可直接在模板中使用，或者在setup其他地方使用

<template><span>{{ msg }}</span></template>

const props= defineProps({msg:String,name:{type:String,default:'xxxx'}
})console.log(props.name)
props.name = 123 //不能修改，声明的props的值是只读readonly的

4.defineProps返回的props对象，是一个proxy对象，所有特性和reactive基本相同，只不过由defineProps定义出的props对象的值是只读的，还有在模板上可以单独属性直接使用

四，在`typescript`中为`props`添加标注类型

1.若不使用typescript来写可忽略，

2.当使用 <script setup> 时，defineProps() 宏函数支持从它的参数中推导类型，即我们可以向上面一样，定义defineProps

defineProps({msg:String,name:{type:String,default:'xxxx'}
})

3.更直接的方法是通过泛型参数来定义 props 的类型，注意当没有使用可选属性时，那么在使用该组件时，一定要传该属性，否则会报错

interface Props {msg:string, //相当于require：true ， 在使用该组件时一定要传改属性name:stringage?:number //require：false
}defineProps<Props>()

4.由于接口不能设置默认值，因此这种方式失去了设置默认值的能力，vue3提供了withDefaults 编译器宏解决

withDefaults(defineProps<Props>(), {name: 'angle',
});

5.在使用withDefaults 编译器宏设置默认值时，对于引用类型，需要使用函数形式

withDefaults(defineProps<Props>(), {list: ()=>[],
});

五，注意事项

1.defineProps只能在setup中使用，且只能在setup的顶层使用，不能在局部作用域使用

2.和vue2一样的原则，defineProps声明的props的值是只读readonly的，不能修改，也就是说，当传过来的是原始值时不能修改，当是对象类型时，不能修改对象类型的引用地址。

3.注意，在使用defineProps泛型参数来定义props时，泛型本身不能是外部引入的类型

defineProps相关推荐

error ‘defineProps‘ is not defined no-undef
error 'defineProps' is not defined no-undef 例如defineProps和defineEmits生成no-undef警告示例.eslintrc.js: mo ...
3.vue3.2的父传子defineProps，子传父emits以及ref
1.父传子 <template><div class="container"><!-- 传递数据这里传了一个string 和一个list --&g ...
vue3.0 ref reactive nextTick watch toRaw defineProps defineEmits
目前使用的一些属性持续更新中 ref:推荐定义基本数据类型(ref值也可以是对象,但是一般情况下是对象直接使用reactive更合理). const data = ref( {id: "1& ...
[@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be imported
Vue Vite项目启动后,控制台报错: [@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be i ...
vue3 ts defineProps
ts 使用vue3的defineProps时 props写法 const props = defineProps({ pic: {type: Array as () => Array<st ...
Vue3中的 defineEmits/defineProps
defineEmits:子传父方法 defineProps:父传子属性值一.defineEmits用法: 已知:父组件中绑定了两个兄弟组件要求:点击其中的兄弟组件1以后,兄弟组件2获取兄弟组件1中 ...
vue3.2props设置默认值【defineProps】
<script setup lang="ts">// ts写法const props = withDefaults(defineProps<{title?: st ...
【Vue】 defineProps 与 props
props \ defineProps 1 props 2 defineProps vue 官网 Props 命名:如果一个 prop 的名字很长,建议使用小驼峰 props: { greetingM ...
vue3的setup语法糖获取代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults
props接收参数有两种 1:props 2:attrs 2选1使用父组件 <template><div>wedss</div><BaseScrollLis ...

defineProps

一，前言

二，`defineProps`介绍

四，在`typescript`中为`props`添加标注类型

五，注意事项

defineProps相关推荐

最新文章

热门文章

defineProps

一，前言

二，defineProps介绍

四，在typescript中为props添加标注类型

五，注意事项

defineProps相关推荐

最新文章

热门文章

二，`defineProps`介绍

四，在`typescript`中为`props`添加标注类型