web前端全系列 教程
1839个小节阅读:2243.1k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
通过 props
传递数据,不仅可以传递字符串类型的数据,还可以是其他类型,例如:数字、对象、数组等
但实际上任何类型的值都可以作为 props 的值被传递
xxxxxxxxxx
<template>
<h3>ComponentA</h3>
<ComponentB :age="age"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
age:20
}
},
components:{
ComponentB
}
}
</script>
xxxxxxxxxx
<template>
<h3>ComponentB</h3>
<p>{{ age }}</p>
</template>
<script>
export default {
props:["age"]
}
</script>
xxxxxxxxxx
<template>
<h3>ComponentA</h3>
<ComponentB :names="names"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
names:["iwen","ime","frank"]
}
},
components:{
ComponentB
}
}
</script>
xxxxxxxxxx
<template>
<h3>ComponentB</h3>
<p v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>
<script>
export default {
props:["names"]
}
</script>
xxxxxxxxxx
<template>
<h3>ComponentA</h3>
<ComponentB :userInfo="userInfo"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
userInfo:{
name:"iwen",
age:20
}
}
},
components:{
ComponentB
}
}
</script>
xxxxxxxxxx
<template>
<h3>ComponentB</h3>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
</template>
<script>
export default {
props:["userInfo"]
}
</script>
实时效果反馈
1. props
能接受的数据类型是:
A 只能接受字符串类型
B 只能接受数组类型
C 只能接受对象类型
D 任何类型
答案
1=>D