vue3学习7：props以及验证

props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用。
在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。

然后需要在父组件中调用：

具体代码如下：
HiVue.vue:

<template>
<div id="HiVue">
  <h1 class="styh1">Hi Vue！！！,{{name}} loves {{hoppy}}h1>
div>
template>

<script>
export default {
  name: "HiVue",
  props:['name','hoppy']
}
script>

<style scoped>

style>

app.vue

<template>
  <div id="app">
      <hi-vue name="Jenny" hoppy="dogs">hi-vue>
      <br>
      <HiVue>HiVue>
    div>
template>

<script>

import HiVue from "@/components/HiVue";
export default {
  name: 'App',
  components: {HiVue},
}
script>
<style scoped>

:deep(.styh1){
  color: blue;
}

style>

效果如下：

如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用。
可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值。

举个栗子
修改app.vue：

<template>
  <div id="app">
      <hi-vue :name="names" :hoppy="ho">hi-vue>
      <br>
      <HiVue>HiVue>
    div>
template>

<script>

import HiVue from "@/components/HiVue";
export default {
  name: 'App',
  components: {HiVue},
  data(){
    return{
      names:'Danny',
      ho:"cats",
    }
  },
  methods:{
  }
}
script>
<style scoped>

:deep(.styh1){
  color: blue;
}

style>

效果如下：

props 验证指的是：在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。
接收的数据 : 数据类型(Number，String，Boolean，Object，Array，Function，RegExp )
举个栗子：
HiVue.vue

<template>
<div id="HiVue">
  <h1 class="styh1">Hi Vue！！！{{name}} is {{age}} years oldh1>
div>
template>

<script>
export default {
  name: "HiVue",
  props: {
    name:String,
    age:Number,
}
}
script>

<style scoped>

style>

app.vue

<template>
  <div id="app">
      <hi-vue :name="names" :age="age">hi-vue>
      <br>
      <HiVue>HiVue>
    div>
template>

<script>

import HiVue from "@/components/HiVue";
export default {
  name: 'App',
  components: {HiVue},
  data(){
    return{
      names:'Danny',
      age:13,
    }
  },
  methods:{
  }
}
script>
<style scoped>

:deep(.styh1){
  color: blue;
}

style>

效果如下：

如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型，例如：`age:[Boolean,Number],

如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。此时，可以通过如下的方式将
其设置为必填项：age:{type:[Boolean,Number],required:true},