【动态绑定props】

      在父组件中使用v-bind，可以为子组件动态绑定props，任意类型的值都可以出传递给子组件的props，包括字符串，数字，布尔值，数组，对象等

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属性进行动态赋值。