[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中也使用双花括号来绑定

  

    {{ heroName }}的票数是：{{ count }}，点击增加
  

完整的代码是

3）父组件给子组件传递prop
现在子组件全部都准备好了，就等父组件传值了，
父组件在template中，通过给子组件的标签添加属性的方式传值，一看就知道了

在App.vue中添加一个数组，用来渲染多个超级英雄

  data(){
    return {
      list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
    }
  }

在template写一个v-for循环

这里需要注意一下，现在传递参数的是时候是通过一个动态变量item传的，所以在heroName前面加了冒号:,是v-bind:的简写

这样我们的超级英雄投票系统就完成了

App.vue的完整代码是

需要注意的是，在传递prop时，如果是数字、布尔值、数组、对象都需要加上冒号:

上面是官网的说明

这节可以主要分为三点

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