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

2022-09-26 130

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一章的文章中，我们了解了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>
复制代码

WC[]6)0RP298UDR68}9XIOK.png

也就是在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>
复制代码

B592N6URY2WQGNL8$N8]2MP.png

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

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

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

A~OYDVFBD]UL(ZPZ[)_AY8V.png

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

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

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

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

L)B1(4UL]II_DS`KG~@K)%4.png

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

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

v-bind="$attrs"

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

`7NG54V8]))FS]~I[P)Y4[D.png

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

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

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

7G3IA@2DYML0%@X8(R[6}92.png

在父组件中传递过来的所有属性值都会被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>
    `
})
复制代码

[~$@GMM2WHV]HKI`3_5}I39.png

如果想要拿到父组件中的某一个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>
    `
})
复制代码

~9B@FUG]R6Q2MLE69OV)%CR.png

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>
    `
})
复制代码

V)AOP_GZ$BFQ%F2ZDP)15_O.png

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

总结

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

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

前言

回顾

Non-Props

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

总结

热门文章

最新文章

相关课程

相关电子书