[vue3快速入门] 18.vue组件基础2——props父组件
上节课我们写了一个计数器组件，但是它每次初始化显示出来都一样，我们这节课学习通过父组件给子组件传值，根据传递不同的值让子组件有不同的效果。这就要用到组件一个重要功能porps。
这节课我们做一个超级英雄投票系统，每个计数器显示一个超级英雄的名字，点击后给这个英雄投票，他的票数加一。
方便起见，先把上节课的counter组件复制出来一个，改个名叫hero.vue，App.vue里的counter也都要改成hero
1）子组件定义一个prop
hero组件要放进App.vue里使用，所以hero就是子组件了，我们给子组件增加一个prop叫heroName，意思是初始化这个子组件时，子组件需要heroName这个参数
在vue中的语法是，在导出的对象增加一个属性props，
export default {
props:['heroName'], // 增加
data() {
return {
count: 0,
}
},
methods: {
onClick() {
this.count++
},
},
}
props是一个数组，表明子组件要接受那些值最为参数，可以是多个，这里数组里只有一个元素，表示我们我们接受一个叫heroName的参数
现在这么写是没有错误的，但是包含的信息有点少，为了以后维护方便和vue更能理解我们的代码，我们给heroName这个参数多加点信息，写法如下
props: {
heroName: {
type: String, // 表示heroName这个参数的数据类型是字符串
default: '', // 如果父组件没有传heroName这个参数时，默认是空字符串
},
},
需要注意，这时props是一个对象object，不再是数组
这样写这个prop表达了三个信息
- hero这个组件可以接收一个叫heroName参数
- heroName这个参数必须是字符串类型
- heroName没有传递时，它的值是一个空字符串
这样我们就为hero这个组件声明了一个叫做heroName的prop，大家要记住这种写法
ps：如果需要传递多个prop，就在props里面写多个这样的属性，形式是一样
2）使用prop
prop的时候和data里面的属性使用一样，在script直接可以使用this.访问
mounted(){
console.log(this.heroName)
},
在template中也使用双花括号来绑定
<div @click="onClick" class="counter-btn">
{{ heroName }}的票数是：{{ count }}，点击增加
</div>
完整的代码是
<template>
<div @click="onClick" class="counter-btn">
{{ heroName }}的票数是：{{ count }}，点击增加
</div>
</template>
<script>
export default {
props: {
heroName: {
type: String,
default: '',
},
},
data() {
return {
count: 0,
}
},
mounted() {
console.log(this.heroName)
},
methods: {
onClick() {
this.count++
},
},
}
</script>
<style>
.counter-btn {
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
3）父组件给子组件传递prop
现在子组件全部都准备好了，就等父组件传值了，
父组件在template中，通过给子组件的标签添加属性的方式传值，一看就知道了
<hero heroName="钢铁侠"></hero>
在App.vue中添加一个数组，用来渲染多个超级英雄
data(){
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
}
在template写一个v-for循环
<ul>
<li v-for="(item, index) in list" :key="index" class="list-item">
<hero :heroName="item"></hero>
</li>
</ul>
这里需要注意一下，现在传递参数的是时候是通过一个动态变量item传的，所以在heroName前面加了冒号:,是v-bind:的简写
这样我们的超级英雄投票系统就完成了
App.vue的完整代码是
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" class="list-item">
<hero :heroName="item"></hero>
</li>
</ul>
</div>
</template>
<script>
import hero from './components/hero.vue'
// 组件基础
export default {
name: 'App',
components: {
hero,
},
data() {
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
},
}
</script>
<style>
.list-item {
margin: 10px;
}
</style>
需要注意的是，在传递prop时，如果是数字、布尔值、数组、对象都需要加上冒号:
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。 -->
<blog-post :likes="42"></blog-post>
<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。 -->
<blog-post :is-published="false"></blog-post>
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。 -->
<blog-post :comment-ids="[234, 266, 273]"></blog-post>
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。 -->
<blog-post
:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
上面是官网的说明
这节可以主要分为三点
- 使用prop向子组件传值
- 子组件对prop的验证：类型和默认值的指定
- 在传递动态参数、数字、布尔等值时，一定要加冒号:,这是新手特别容易出错的一个地方，大家一定要注意
