Vue3 props的使用详解

• 前端

Props 声明

1、字符串数组声明props

const props = defineProps(["cat"])
 
console.log(props.cat)

 2.对象实现props

const props = defineProps({
    cat:string
})


//可以在模板中直接使用cat变量

  {{ cat }}

你还可以使用类型标注,这是ts的特性。

const props = defineProps()


//或者使用接口

interface animal{
    cat?:string
}

const props = defineProps()

3、使用camelCase（小驼峰命名法），可以在模板中直接使用(如第一个例子)。看代码

defineProps({
  getSex: String
})



 {{getSex}}

4、动态绑定props

import {reactive} from "vue"

const data=reactive({
    article:{
        cat:"tom"
}
})

//下方传递这个cat



//然后你就可以改变cat的属性值就可以实现动态传递数据了

注意事项：defineprops在之前的Vue版本中需要引入，但是现在是不需要了。上面几个例子是建立在setup语法糖的基础上编写的即,如果你不是太熟悉setup语法糖，那么就需要在script标签中使用setup(){}中使用props属性取得传递的数据

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/b5cd114e05.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐