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

原创

致于数据科学家的小陈 2022-09-11 00:50:07 ©著作权

文章标签 props v-bind vue基础父子组件组件间传值 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者致于数据科学家的小陈的原创作品，请联系作者获取转载授权，否则将追究法律责任

组件间传值及数据校验

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

父子组件传值

<!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>