说明
使用 传递动态props，解决 vue教程-父组件向子组件传递数据（传递静态props） 中的问题
解决方式：通过 父组件向子组件传递数据 实现的，父组件 通过 v-bind 属性绑定， 子组件通过 props 接收
代码
只需要修改 父组件 App.vue，代码如下：
<template>
<!-- 模板 -->
<div id="app">
关键代码：传递动态Prop，属性名是 :name 或 v-bind:sex，表示属性值是在 data中定义的：
<user-info :name="fname" v-bind:sex="fsex" :age="fage"/>
</div>
</template>
<script>
//引入 UserInfo 组件
import UserInfo from './components/UserInfo'
export default {
name: 'App',
components: {
'user-info':UserInfo //注册局部组件
},
data:function(){//定义数据
return {
fname:'张三',
fsex:'男',
fage:22
}
}
}
</script>
传值过程
动态传递的好处
按传入数据的类型处理，类型有：
- string
- number
- boolean
- array
- object
案例
实现下图功能，需要 动态传递prop：
- 年龄是
number类型 - 是否开心是
boolean类型 - 爱好是
array类型（但显示是object）
创建组件
在 components 目录下，创建 UserInfo4.vue 文件，内容如下：
<template>
<div id="app">
{{msg}}
<div>昵称：{{name}}（类型：{{typeof name}}）</div>
<div>性别：{{sex}}（类型：{{typeof sex}}）</div>
<div>年龄：{{age+1}}（类型：{{typeof age}}）</div>
<div>是否开心：{{is_happy}}（类型：{{typeof is_happy}}）</div>
<div>
爱好：<span v-for="(item,index) in likes" :key="index">{{ item }} </span>
（类型：{{typeof likes}}）
</div>
</div>
</template>
<script>
export default {
data:function(){
return {
msg:'用户详情信息'
}
},
props:['name','sex','age','is_happy','likes']//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>
使用组件
修改 App.vue 文件，内容如下：
<template>
<!-- 模板 -->
<div id="app">
传递动态Prop，属性值是在data中定义的：
<user-info4 :name="fname" :sex="fsex" :age="fage" :is_happy="fis_happy" :likes="flikes"/>
</div>
</template>
<script>
import UserInfo4 from './components/UserInfo4'
export default {
name: 'App',
components: {
'user-info4':UserInfo4, //注册局部组件
},
data:function(){//定义数据
return {
fname:'张三',
fsex:'男',
fage:22,
fis_happy:true,
flikes:['王者荣耀','抖音','吃鸡']
}
}
}
</script>