【Vue3 从入门到实战进阶式掌握完整知识体系】011-探索组件的理念：组件间传值及传值校验

深藏阁楼爱情的钟 2023-10-03 08:58 15阅读 0赞

### 文章目录 ###

*   *  2、组件间传值及传值校验
     *   *  父组件给子组件传值
         *  运行结果
         *  父组件给子组件传动态参数
         *  运行结果
         *  子组件校验父组件的传参
         *  运行结果
         *  父组件给子组件传函数
         *  运行结果
         *  设置必须传参数
         *  运行结果
         *  为参数设置默认值
         *  运行结果
         *  要求值小于1000
         *  运行结果

## 2、组件间传值及传值校验 ##

### 父组件给子组件传值 ###

### 运行结果 ###

![image-20210613110012006.png][]

### 父组件给子组件传动态参数 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 123
          }
        },
        template: `
            <div>
              <test message="123" />
              <test :message="num" />
            </div>
        `
      });
    
      app.component('test',{
         
        props: ['message'],
        template: `
            <div>{
          { typeof message }}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613110404258.png][]

### 子组件校验父组件的传参 ###

> String、Array、Boolean、Object、Function、Symbol

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            num: 123
          }
        },
        template: `
            <div>
              <test message="123" />
              <test :message="num" />
            </div>
        `
      });
      // String、Array、Boolean、Object、Function、Symbol
      app.component('test',{
         
        props: {
         
          message: String
        },
        template: `
            <div>{
          { typeof message }}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613110623069.png][]

### 父组件给子组件传函数 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        methods:{
         
          add(){
         
            console.log("函数执行成功！")
          }
        },
        template: `
            <div>
              <test :message="add" />
            </div>
        `
      });
    
      // 这里写成校验的写法
      app.component('test',{
         
        props: {
         
          message: Function
        },
        template: `
            <div>
              {
          { typeof message }}
              <button @click="message">点我</button>
            </div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613111125225.png][]

### 设置必须传参数 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        template: `
            <div>
              <test message="hello" />
              
              <test />
            </div>
        `
      });
    
      // 这里写成校验的写法
      app.component('test',{
         
        props: {
         
          message: {
         
            type: String, // 要求传字符串（类型）
            required: true // 要求必须传（是否必须）
          }
        },
        template: `
            <div>
              {
          { typeof message }}
              {
          { message }}
            </div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613123623423.png][]

### 为参数设置默认值 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        template: `
            <div>
              <test message="hello" />
              
              <test />
            </div>
        `
      });
    
      // 这里写成校验的写法
      app.component('test',{
         
        props: {
         
          message: {
         
            type: String, // 要求传字符串
            required: true, // 要求必须传
            default: '大哥刘备' // 默认值，也可以是一个函数
          }
        },
        template: `
            <div>
              {
          { typeof message }}
              {
          { message }}
            </div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613123909522.png][]

### 要求值小于1000 ###

<!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>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            number: 2000
          }
        },
        template: `
            <div>
              <test :message="number" />
            </div>
        `
      });
    
      // 这里写成校验的写法
      app.component('test',{
         
        props: {
         
          message: {
         
            type: Number, // 要求传数字
            required: true, // 要求必须传
            default: 100, // 默认值
            validator: function(value){
         
              return value < 1000;
            } // 限定值
          }
        },
        template: `
            <div>
              {
          { typeof message }}
              {
          { message }}
            </div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613124552130.png][]

[image-20210613110012006.png]: https://img-blog.csdnimg.cn/img_convert/f5cf332f4892f66d8f44ad8cfc47187a.png
[image-20210613110404258.png]: https://img-blog.csdnimg.cn/img_convert/cce01a3e37e845eabe95318750bc0234.png
[image-20210613110623069.png]: https://img-blog.csdnimg.cn/img_convert/0854d3751f46c3de606958a988d9e83a.png
[image-20210613111125225.png]: https://img-blog.csdnimg.cn/img_convert/2ddf1cb09fabd74c5bfa1827b000fcc9.png
[image-20210613123623423.png]: https://img-blog.csdnimg.cn/img_convert/c6f03457dc1cc72c677d753fcc189670.png
[image-20210613123909522.png]: https://img-blog.csdnimg.cn/img_convert/cb1215c04a4f04c91d0654e3ff57a027.png
[image-20210613124552130.png]: https://img-blog.csdnimg.cn/img_convert/19f38ea7c5aa9f657a40697788747cc9.png