vue3学习7:props以及验证

props 是组件的自定义属性,组件的使用者可以通过 props 把数据传递到子组件内部,供子组件内部进行使用。
在封装 vue 组件时,可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。
vue3学习7:props以及验证_第1张图片
然后需要在父组件中调用:
在这里插入图片描述

具体代码如下:
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>

效果如下:
vue3学习7:props以及验证_第2张图片
如果父组件给子组件传递了未声明的 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>

效果如下:
vue3学习7:props以及验证_第3张图片

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>

效果如下:
vue3学习7:props以及验证_第4张图片
如果某个 prop 属性值的类型不唯一,此时可以通过数组的形式,为其指定多个可能的类型,例如:`age:[Boolean,Number],

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

你可能感兴趣的