Non-props 属性

通过前几节课的学习，我们知道了父组件传值给子组件需要通过声明props参数来接收数据。例如下面代码：

<script>
  const Message = {
    props: ['msg'],
    template: `<div>{{msg}}</div>`
  }

  const app = Vue.createApp({
    components: {
      Message
    }, 
    data() {
      return {
        text: "hello world!"
      }
    },
    template: `
      <Message :msg="text" />
    `
  })
  const vm = app.mount("#app")
</script>

初识Non-props 属性

如果我们不去声明props参数，然后硬着头皮给它传值，那么会出现什么情况呢，我们来尝试一下。

<script>
  const Message = {
    template: `<div>message组件</div>`
  }

  const app = Vue.createApp({
    components: {
      Message
    }, 
    data() {
      return {
        text: "hello world!"
      }
    },
    template: `
      <Message :msg="text" />
    `
  })
  const vm = app.mount("#app")
</script>

我们把props: ['msg']删除掉，我们打开浏览器并且打开控制台看一下dom结构会发现，msg属性被原封不动的渲染到了Message组件的<div>节点上。

Non-props特性，当我们传递数据给子组件的时候，子组件没有设置相应的props属性来接受数据，那么它会默认把传递过来的数据和属性名渲染到子组件最外层的dom节点上。

我们再来验证一下，这次我们把Message组件里面放两个div，并且给最外层div的class设置成div1，方便我们区分。

 const Message = {
    template: `
      <div class="div1">
        <div>message组件</div>
      </div>
    `
  }

运行结果:

Non-Props 属性的使用场景

给组件外层标签设置样式，也适合于其他单纯传递属性的场景。

禁止Non-Props 属性 渲染到最外层标签

如果我们希望不接收的属性，不要渲染到最外层标签上。

设置inheritAttrs: false就可以禁止Non-Props默认渲染到最外层标签上。

const Message = {
    inheritAttrs:false,
    template: `
      <div class="div1">
        <div>message组件</div>
      </div>
    `
  }

子组件有多个最外层标签

刚才讲了，Non-Props 属性 会往子组件最外层的标签渲染属性，当子组件有多个最外层标签时，VUE 会如何渲染呢，我们来尝试一下。

const Message = {
    template: `
      <div class="div1">message组件div1</div>
      <div class="div2">message组件div2</div>
      <div class="div2">message组件div3</div>
    `
  }

运行结果

三个最外层标签都没有父组件传递的属性，VUE 不知道该给哪个标签渲染，所以干脆就不渲染了。

为某个最外层标签渲染

Non-props 属性默认给我们最外层标签渲染，有时候并不满足我们的需求，我们想要给它指定渲染到某个标签元素上。

const Message = {
    template: `
      <div class="div1">message组件div1</div>
      <div class="div2" v-bind="$attrs">message组件div2</div>
      <div class="div2">message组件div3</div>
    `
  }

vue中自带一个参数$attrs 使用 v-bind="$attrs"，就可以给指定标签绑定上Non-props 属性，需要注意的是$attrs接收的是所有属性，不单一指某一个属性，所以我还可以给不同标签设置不同属性。

 const Message = {
    template: `
      <div class="div1" :msg="$attrs.msg">message组件div1</div>
      <div class="div2" v-bind:style="$attrs.style">message组件div2</div>
      <div class="div2">message组件div3</div>
    `
  }

运行结果

生命周期函数获取 Non-Props 属性

在组件的生命周期中可以通过this.$attrs来获取Non-props 属性。

const Message = {
    mounted () {
      console.info(this.$attrs.msg);
    },
    template: `
      <div class="div1" :msg="$attrs.msg">message组件div1</div>
      <div class="div2" v-bind:style="$attrs.style">message组件div2</div>
      <div class="div2">message组件div3</div>
    `
  }

运行结果

今天学习了VUE3 的 Non-Props 属性，希望大家在开发工作中可以加以利用，提升更高的开发效率。