【Vue3从零开始-第三章】3-2 vue组件之间传值

蜡笔小心_
VIP.5 如鱼得水
529 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

前言

在上一章的文章中，我们了解了vue的局部组件和全局组件，今天我们继续深入了解一下vue的组件之间传值。大家在之前的例子中也有用过，下面我们就详细的讲解一下。

回顾

上一章中我们学习了组件的定义，知道了VUE实例中可以引入其他全局组件。

<script>
  const app = Vue.createApp({
    template: `
      <div>
        <hello />
      </div>
    `
  });

  app.component('hello', {
    template: `
      <div>Hello World</div>
    `
  })

  const vm = app.mount('#root');
</script>

image.png

但是这样渲染出来的子组件只是一个固定字符串而已，那如果我们想要动态传参需要怎么做呢？

props

在第一章中，我们也写过组件之间传参的小例子，主要就是通过父组件引用子组件的时候，在子组件标签上定义参数，然后子组件中可以通过props去接收传递过来的参数了。

const app = Vue.createApp({
    template: `
      <div>
        <hello content='See You' />
      </div>
    `
});

app.component('hello', {
    props: ['content'],
    template: `
      <div>{{content}}</div>
    `
})

image.png

  • 此时子组件上的content的值就不是固定的了，值是通过父组件调用子组件的标签时，然后在标签上定义一个content属性，子组件中通过props接收content属性值，就可以直接在模板中使用父组件传递过来的数据了。

上面代码中的content传递过来的是一个字符串，有时候我们需要传递一些其他类型的值该怎么做呢？比如传递数字、Boolean类型......

const app = Vue.createApp({
    template: `
      <div>
        <hello content='1234' />
      </div>
    `
});

image.png

当我们把content改成1234之后，页面上好像也渲染出数字了，但是当我们在子组件中通过typeof来输出一下看看就知道是什么类型咯。

app.component('hello', {
    props: ['content'],
    template: `
      <div>{{typeof content}}</div>
    `
})

image.png

这时候就看到页面上输出的是一个String，也就是我们通过content传递过来的不管是什么都只是一个String类型。

    • 大家可以试试true、false或者Object之类的，输出出来也还是String哦~~

在以前的文章中，我们了解过动态传参的内容，那在组件传参中是不是也可以用动态传参呢?

const app = Vue.createApp({
    data(){
      return {
        cont: 1234
      }
    },
    template: `
      <div>
        <hello :content='cont' />
      </div>
    `
});

image.png

  • 在父组件中通过data方法定义一个数据项cont， 然后把子组件上的content属性通过v-bind指令设为一个动态参数传递给子组件。

  • 通过v-bind指令或者简写成 : 绑定的属性称为动态传参指令，没有通过v-bind指令绑定的属性称为静态传参指令。

  • 静态传参只能传递字符串参数。动态传参可以传递js中的各种类型的值。

传参校验

校验类型

上面的例子中传递的都是字符串或者数字类型的，如果在子组件中只想要接收一个boolean类型的怎么办呢？

app.component('hello', {
    props: {
      content: Boolean
    },
    template: `
      <div>{{typeof content}}</div>
    `
})
  • 这里的props就不是一个数组了，变成一个对象了，在props对象中同样接收父组件传递过来的content属性，但是我们给这个属性定义了一个值Boolean，表示当前子组件接收到的content属性只能是Boolean类型的，不能是其他类型的。

image.png

  • 大家可能发现了页面上渲染出来的还是number类型，可是在浏览器控制台中已经报错了。通过错误信息可以看出是提示子组件想要接收一个Boolean类型的，不是一个number类型的值。

[Vue warn]: Invalid prop: type check failed for prop "content". Expected Boolean, got Number with value 1234.

这时候我们只需要把父组件中的cont值改为Boolean类型即可。

const app = Vue.createApp({
    data(){
      return {
        cont: true
      }
    },
    template: `
      <div>
        <hello :content='cont' />
      </div>
    `
});

image.png

  • 除了上面说的类型，大家还可以试试String、Array、Object、Function、Symbol

校验必填项

默认情况下，我们在父组件中不传递属性给子组件，在子组件中是接收不到的，页面上也只是会显示一个空白而已。

但是有些时候，我们需要父组件必须传递一个值给到子组件该怎么办呢？

<script>
  const app = Vue.createApp({
    data(){
      return {
        cont: 123
      }
    },
    template: `
      <div>
        <hello />
      </div>
    `
  });

  app.component('hello', {
    props: {
      content: {
        type: Number,
        required: true
      },
    },
    template: `
      <div>{{content}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

通过代码可以看到在子组件中的props接收的属性content变成了一个对象，对象中有一个type定义的是父组件中传过来的值是什么类型，还有一个required就是校验父组件是否有传content属性了。

image.png

  • 当我们不给子组件传递参数的时候，浏览器控制台就会提示错误信息。需要传递一个content属性。

[Vue warn]: Missing required prop: "content"

默认值

当我们在父组件中没有给子组件一个属性值，而子组件中也没有校验必填项时，此时可以在子组件中给一个默认值。

也就是当父组件没有传递属性值时，子组件默认取自己定义的值。

const app = Vue.createApp({
    data(){
      return {
        cont: 123
      }
    },
    template: `
      <div>
        <hello />
      </div>
    `
});
app.component('hello', {
    props: {
      content: {
        type: Number,
        default: 567
      },
    },
    template: `
      <div>{{content}}</div>
    `
})

image.png

  • 在父组件中可以看到子组件标签上没有添加任何属性值，但是在子组件中接收content属性时，在content属性对象中定义了一个default来表示当前属性在没有接收到任何值的情况下，默认显示default中的值。

default不仅可以直接定义参数，还可以写成一个函数返回默认值。

default: function(){
    return 567;
}

函数校验

<script>
  const app = Vue.createApp({
    data(){
      return {
        cont: 1234
      }
    },
    template: `
      <div>
        <hello :content="cont" />
      </div>
    `
  });

  app.component('hello', {
    props: {
      content: {
        type: Number,
        validator: function(value){
          return value < 1000
        }
      },
    },
    template: `
      <div>{{content}}</div>
    `
  })

  const vm = app.mount('#root');
</script>

同样是在子组件中接收content属性的对象中定义一个validator函数，函数中会接收父组件传递过来的值，在函数里面可以做一些判断，然后return出来的是一个boolean类型，如果是true就是校验通过，反之校验失败。

image.png

上面这个例子中，我们在validator函数中判断父组件传递过来的值需要小于1000，但是在父组件中传递过来的值是大于1000的值，此时浏览器控制台就会提示错误信息了。

[Vue warn]: Invalid prop: custom validator check failed for prop "content".

总结

本篇文章主要讲解了组件传参中的基础内容：动态传参指令、传参校验。

avatar
文章
阅读
粉丝