在父组件中使用v-bind,可以为子组件动态绑定props,任意类型的值都可以出传递给子组件的props,包括字符串,数字,布尔值,数组,对象等
1
1.字符串
接下来以父组件传递字符串的类型props数据,代码如下:
<template>
<Child:init="username"/>
</teplate>
<script setup>
import{ref}from'Vue'
const username =ref('小圆')
</script>
init属性是子组件声明的props,通过v-bind绑定init属性。上述代码,用到了名称为Child子组件,该子组件代码如下:
<template></template>
<script setup>
const porps = defineProps(['init'])
console.log(props)
</script>
上述代码用于接收到的props数据输出到控制台,读者可以自行查看控制台的输出结果。
2.数字
从父组件为子组件传递数字类型props数据,代码如下:
<template>
<Child:init="12"/>
<Child:init="age"/>
</template>
<script setup>
import Child from 'vue'
const age = ref(12)
</script>
上述代码中,init属性是子组件声明的props,通过v-bind实现将12识别为表达式而不是字符串,init属于动态赋值。
3.布尔值
从父组件为子组件传递布尔类型props数据,代码如下:
<template>
<Child:init/>
<Child:init="flase"/>
<Child:init="is Flag"/>
</template>
<script setup>
import Child from './Child.vue'
const isFlag = ref(true)
</script>
上述代码中,init属性是子组件声明的props,通过v-bind实现将flase识别为表达式而不是字符串,通过isFlag属性进行动态赋值。
4.数组
从父组件中为子组件传递数组类型的props数据。
<template>
<Child :init="['唱歌','跳舞','滑冰']"/>
<Child :init="hobby"/>
</template>
<script set up>
import Child from'./Child.vue'
import {ref}from'vue'
const hobby = ref(['唱歌','跳舞','滑冰'])
</script>
init属性是子组件声明的【props】,第二行代码通过v-bind实现将数组识别为表达式而不是字符串,第三行代码表示为init属性进行动态赋值。
5.对象
从父组件中为子组件传入对象类型的props数据,或者将对象中的部分属性作为被传入的props数据
<template>
<Child :init="{height:'180厘米',weight:'70千克'}"/>
<Child :height="bodyInfo.height":weight='bodyInfo.weight"/>
<Child v-bind="bodyInfo"/>
</template>
<script setup>
import Child from'./Child.vue'
import {reactive} from 'vue'
const bodyInfo = reactive({
height:'180厘米',
weight:'70千克',
})
</script>
上述代码中,init,height,weight,属性是子组件中声明的props,需要在子组件中自行添加height,weight这两个props,第二行代码用于通过v-bind实现将对象识别为表达式而不是字符串,第三行代码表示通过bodyInfo.height,bodyInfo.weight进行动态赋值。第4行代码表示将一个对象的所有属性都作为prop传入,该语法可以取代v-bind:prop-name形式语法,第4行行代码相当于第3行代码简化版,9~12行代码定义了bodyInfo对象,表示身体信息,包括身高height和体重weight。\