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

前言

在上一章的文章中，我们了解了vue组件单项数据流的方式，今天我们继续深入了解一下vue组件中你不了解的Non-Props属性。

回顾

通过前面几篇文章的学习，我们知道组件传值的时候，是通过props去接收的，但是当我们在子组件中不使用props中的值时，页面上的DOM元素并不会显示父组件传递过来的属性。

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

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

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

也就是在DOM元素上只有一层又一层的div标签。

Non-Props

疑问❓什么是Non-Props属性呢？

父组件给子组件传递内容的时候，子组件不通过props去接收。

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

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

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

把子组件中的props删除之后，在浏览器控制台DOM元素中会发现，子组件Hello World所在的标签上多了一个msg属性，而这个属性正是父组件中写在子组件标签上的。

如果不想在子组件中接收这种Non-Props属性带来的结果，可以在子组件中加上inheritAttrs属性。

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

inheritAttrs属性表示子组件不继承父组件中传递过来的Non-Props属性

从上面的案例中会发现，我们子组件中只有一个根元素，那如果子组件中有多个根元素会怎样呢？

在以前的内容中也简单讲过一点点，下面就来详细讲解一下。

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

在浏览器控制台元素中会看到子组件中的标签上好像都没有父组件传递过来的msg属性值。

想要获取到父组件传递过来的属性值，有以下几种方法去实现：

v-bind="$attrs"

app.component('hello', {
    template: `
      <div>Hello</div>
      <div v-bind="$attrs">JueJin</div>
      <div>Bug</div>
    `
})

通过v-bind指令并绑定$attrs值，就会告诉vue底层，我们想要获取父组件中传递过来的属性，并且要放在JueJin所在的div标签上。

这个方法并不只是拿到父组件中的一个属性值，是可以拿到所有属性值的。

const app = Vue.createApp({
    template: `
      <div>
        <hello msg="Juejin" msg1="World" />
      </div>
    `
});

- 在父组件中传递过来的所有属性值都会被v-bind指令中绑定的$attrs所接收。

v-bind:xxx="$attrs.xxx"

app.component('hello', {
    template: `
      <div v-bind:msg="$attrs.msg">Hello</div>
      <div v-bind="$attrs">JueJin</div>
      <div>Bug</div>
    `
})

如果想要拿到父组件中的某一个Non-props属性，可以通过$attrs绑定父组件中的Non-Props属性，然后通过v-bind指令绑定到div元素上。

app.component('hello', {
    template: `
      <div v-bind:msg="$attrs.msg">Hello</div>
      <div v-bind="$attrs">JueJin</div>
      <div v-bind:title="$attrs.msg1">Bug</div>
    `
})

- v-bind指令绑定的属性名称可以自定义，但是$attrs绑定的Non-Props属性必须是父组件中传递过来的属性名称。

父组件中传递给子组件的Non-Props属性除了可以在子组件的模板中使用，还可以在子组件中的生命周期函数里面使用。

app.component('hello', {
    mounted(){
      console.log('这是mounted生命周期打印的数据：', this.$attrs.msg)
    },
    template: `
      <div v-bind:msg="$attrs.msg">Hello</div>
      <div v-bind="$attrs">JueJin</div>
      <div v-bind:title="$attrs.msg1">Bug</div>
    `
})

在生命周期函数中，我们可以通过this.$attrs获取到父组件传递给子组件的Non-Props属性。

总结

本篇文章主要讲解了vue组件中的Non-Props属性，虽然在实际项目中运用的地方不是很多，但是也需要理解其中的含义和用法。

【Vue3从零开始-第三章】3-4 vue组件中你不了解的Non-Props属性

前言

回顾

Non-Props

疑问❓什么是Non-Props属性呢？

总结