[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表达了三个信息

1. hero这个组件可以接收一个叫heroName参数
2. heroName这个参数必须是字符串类型
3. 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>

上面是官网的说明

这节可以主要分为三点

1. 使用prop向子组件传值
2. 子组件对prop的验证：类型和默认值的指定
3. 在传递动态参数、数字、布尔等值时，一定要加冒号:,这是新手特别容易出错的一个地方，大家一定要注意