VUE3基础入门教程-组件篇-码农小朱

把上节课代码拿出来，在上节课的代码上给大家来演示一下，我们先把多余东西删除掉了，让它看起来简洁干净一点。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="https://unpkg.com/vue@next"></script>

<body>
  <div id="app"></div>
</body>

<script>
  const Shop = {
      props:['clerk'],
      template: `<div>欢迎光临本小店，我是店员{{clerk}}。</div>`
  }
  const App = Vue.createApp({
    components: {
      Shop
    },
    data() {
      return {
        staffName:'小明'
      }
    },
    template: `
      <Shop :clerk="staffName"/>
    `
  })
  const vm = App.mount("#app")
</script>

</html>

上节课我们学会父子组件的传值，但是我们没有限制传值的类型，也就是当前clerk这个参数是没有做类型校验的，我们其实可以给他传任意类型的值。

比如我们将staffName变量改成了数值类型123，这样写它也不会出现任何问题。为了方便观看结果，我们用typeof把传值的类型打印出来看一下。

<script>
  const Shop = {
      props:['clerk'],
      template: `<div>{{typeof clerk}}</div>`
  }
  const App = Vue.createApp({
    components: {
      Shop
    },
    data() {
      return {
        staffName:123
      }
    },
    template: `
      <Shop :clerk="staffName"/>
    `
  })
  const vm = App.mount("#app")
</script>

甚至我们给它传递一个数组或者对象，也是能够正常执行的。显然这样的代码在某些需求下是不够严谨的，可能会导致程序崩溃。

data() {
    return {
      staffName:['小明','小花','小王']
    }
 },

data() {
   return {
     staffName:{name:'小花',sex:'女'}
   }
},

类型校验

为了让代码更加严谨，有时候我们需要对组件传过来的数据进行类型限制。

我们把props声明这个地方由于数组改变成json对象键值对的方式左边是key是表示参数名称右边值表示数据类型例如 String Number Boolean Object Array ....等等。

下面代码我们给staffName参数限制成String类型。

const Shop = {
      props:{
        clerk:String
      },
      template: `<div>{{typeof clerk}}</div>`
  }

这时我们偏偏给它传递一个Number类型数据123，然后打开控制台，我们就会发现有一段代码警告，就是提示我们prop类型检查失败，clerk需要的是string类型但是却得到了数值类型值为123

这只一个警告信息，并不是报错也不会阻断程序执行，我们只需要把值改成String类型就行了。

那么我们就只给大家展示到这里，其它的类型大家自己去尝试吧。

**多种可能的类型**

vue给我们设置多种类型的方式，我们只需要以数组的方式给参数设置类型
就上面那个代码，我们希望clerk参数可以接收String类型也可以接收Number，可以改成这样

const Shop = {
      props:{
        clerk:[String,Number]
      },
      template: `<div>{{typeof clerk}}</div>`
  }

必须传值和默认值校验

键值对key还是代表参数名，接收一个对象表示多种检验规则，type表示的是数据类型校验，再用required设置为true表示这个参数必传。然后我们不给clerk参数传值，这时候我们再运行他就会警告，说我们缺少clerk属性。

所以我们必须的传入clerk参数值。

当我们没有传入clerk值时，我们希望它有个默认值，这时候我们只需要使用default设置一个默认值。当然我们不应该让default和required同时使用，因为这两个规则明显就有冲突。

 const Shop = {
      props:{
        clerk:{
          type:string,
          default:"小红"
        }
      },
      template: `<div>{{typeof clerk}}</div>`
  }

我们设置了一个默认值为小红，当我在组件上不传值得时候它默认的就是小红。

自定义校验函数

上面那些都是官方为我们设计好校验规则，当不满足我们需求的时候我们，我们还可以自定义校验规则。使用validator方法，在这个方法里面我们就可以对它进行数据校测。

我们从重新加入一个单数sex表示性别，我们希望它只能传入男或女。

const Shop = {
      props:{
        clerk:{
          type:String,
          default:"小红"
        },
        sex:{
          validator(value){
            return value == '男' || value == '女'
          }
        }
      },
      template: `<div>{{clerk}}</div>`
  }

在validator方法里面返回true表示检验成功，返回false表示校验失败。

当我们给传入一个其它并性别男女时他就会报警告了，只有当我们传入男女时才能校验通过。

我们还可以使用正则来做校验，比如我们来做一个手机号检验。

 const Shop = {
    props: {
      clerk: {
        type: String,
        default: "小红"
      },
      sex: {
        validator(value) {
          return value == '男' || value == '女'
        }
      },
      phone:{
        validator(value){
          return /^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value)
        }
      }
    },
    template: `<div>{{clerk}}</div>`
  }

视频讲解