• vue3 基础组件间传值及校验


    本篇讲基于对页面组件化拆分后, 组件之间如何进行数据传递, 通常是父组件如何给子组件进行传值, 子组件接收并进行数据校验后再使用.

    父子组件传值

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <title>组件间传值</title>
      <script src="https://unpkg.com/vue@3"></script>
    </head>
    
    <body>
      <div id="root"></div>
      <script>
        const app = Vue.createApp({
          // 1. 父组件可通过 自定义属性 的方式给 子组件传递数据
          template: `
          <div>
            <Son content="father love you forever!" />
          </div>
          `
        })
    
        // 2. 子组件通过 props 属性进行接收值
        app.component('Son', {
          props: ['content'],
        // 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了
          template: `<div>{{content}}</div>`
        })
    
        const vm = app.mount('#root')
    
      </script>
    </body>
    
    </html>
    

    就两个关键步骤:

    • 父组件可通过 自定义属性 的方式给 子组件传递数据
    • 子组件通过 props 属性接收数据

    动态属性传值

    即根据后端数据去让父组件的属性值能动态变化地将其传递给子组件 (v-bind).

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <title>动态属性传值 v-bind</title>
      <script src="https://unpkg.com/vue@3"></script>
    </head>
    
    <body>
      <div id="root"></div>
      <script>
        const app = Vue.createApp({
          // 通过数据去动态传值 v-bind
          data () {
            return { num: 666 }
          },
          template: `
          <div>
            <Son :content="num" />
          </div>
          `
        })
    
        // 2. 子组件通过 props 属性进行接收值
        app.component('Son', {
          props: ['content'],
        // 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了
          template: `<div>{{content}}--{{typeof content}}</div>`
        })
    
        const vm = app.mount('#root')
    
      </script>
    </body>
    
    </html>
    

    注意这里的 content 属性要通过 v-bind:content="num", 简写为 :content:"num". 此时页面显示:

    666--number
    

    然而如果通过 content:"666" 的方式传递, 则页面会显示:

    666--string
    

    说明由 data ( ) 经过 v-bind 这样动态传值子组件能识别数据类型的. 而 直接写死传则是静态的字符 string 类型.

    子组件数据校验

    父子组件间能动态属性传值, 则相应地子组件能对传过来的数据做一个校验, 如果有问题就警告这样的.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <title>子组件校验数据</title>
      <script src="https://unpkg.com/vue@3"></script>
    </head>
    
    <body>
      <div id="root"></div>
      <script>
        const app = Vue.createApp({
          data () {
            return { num: null }
          },
          template: `
          <div>
            <Son :content="num" />
          </div>
          `
        })
    
        // 子组件通过 props 属性进行接收值
        // 1. 类型校验: String, Number, Boolean, Array, Object, Function
        // 2. 必填校验: required: true
        // 3. 默认属性: default: functioin () { reutn 666 }
        // 4. 复杂校验: validator: function (value) { return value > 10 } 
        app.component('Son', {
          props: {
            content: {
              type: Number,
              required: true,
              // 默认可以是一个值, 函数啥的都行
              default: function () { return 666 },
              // 
            }
          },
        // 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了
          template: `<div>{{content}}--{{typeof content}}</div>`
        })
    
        const vm = app.mount('#root')
    
      </script>
    </body>
    
    </html>
    

    小结

    • 父组件可通过 自定义属性 v-bind 的方式给 子组件传递数据
    • 子组件通过 props 属性接收数据, 并能进行各种校验
    • 类型校验: String, Number, Boolean, Array, Object, Function
    • 必填校验: required: true
    • 默认属性: default: functioin ( ) { return 666 }
    • 复杂校验: validator: function (value) { return value > 10 }
  • 相关阅读:
    CF821E 【Okabe and El Psy Kongroo】
    BZOJ1231: [Usaco2008 Nov]mixup2 混乱的奶牛
    P1896 [SCOI2005]互不侵犯
    QBXT Day 2 记录
    CF467C George and Job
    【luogu P3373 线段树2】 模板
    【luogu P1306 斐波那契公约数】 题解
    【luogu T24743 [愚人节题目5]永世隔绝的理想乡】 题解
    【luogu P1903 [国家集训队]数颜色】 题解
    莫队算法~讲解
  • 原文地址:https://www.cnblogs.com/chenjieyouge/p/16654742.html
Copyright © 2020-2023  润新知