课程内容：
2022.09.09的学习内容：

vue基础入门（中）

1-5 Non-Props 属性是什么

我们来学习一下 Non-Props 属性，什么叫做Non-Props 属性？
看代码：

解读代码：
我定义了一个counter的全局组件，然后我在根组件里面去使用了一下counter，
有的时候我会向子组件传值，比如说我传一个message，等于hello。‍‍

如果我父组件向子组件传递了一个数据叫做hello，正常来说子组件应该通过props来接受，在这里就去接收 message，接收它，但是我并没有用，
这一块我接收了之后，它就是一层div，两层div，‍‍

什么叫Non-Props？它的意思就是‍‍父组件给子组件传递内容的时候，‍‍子组件不通过props来接收，这个时候会发生一件什么样的事情，

如果你不接收的话，最外层有个div，‍‍你会发现底层的 div上是不是多了一个message等于hello。‍‍

当你去使用Non-Props特性的时候，也就是父组件向子组件传值，但是子组件不接收的情况，‍‍在这个时候底层做一些什么样的操作，‍‍它会把父组件传递过来的内容放在子组件最外层的 DOM标签下，‍‍变成子组件最外层到标签的一个属性。‍‍

你调用一个counter，其实相当于‍‍ counter 这块的内容会被替换成下面的div counter，同时Non-Props属性‍‍会被放到子组件的最外层的DOM标签上，所以所以<counter msg="hello" />就会变成<div msg="hello">Counter</div>，

假如说我不希望你的子组件最外层的DOM节点上展示这个message，你可以怎么办呢？‍‍
你可以在这里加一个特性，

什么意思？也就是‍‍我不继承父组件传递过来的这些Non-Props属性，

当你加了inheritAttrs等于 false 的时候，父组件你再传递 message的时候，‍‍子组件 div上就不会往上添加属性值了，这是inheritAttrs的一个特性。‍‍

一般什么情况下我们会用inheritAttrs特性？
一般比如说我调子组件的时候，我想给它一个样式，可以写style等于color，冒号red，

你会发现你的父组件调用子组件的时候，直接传一个样式，‍‍子组件就会把样式放到最外层的div标签上，这样的话其实‍‍有的场景下是有一些作用的，所以Non-Props属性一般来说它‍‍在做样式修饰 包括 你给一些class的情况下，它的用处还是有的，所以你把它的特点记住就行了。‍‍

假如 我现在‍‍父组件调用子组件的时候传了一个message等于hello，现在子组件是一个根节点，‍‍我们之前讲过，如果它有多个根节点会怎么样，我们看一下它有三个根节点，

当我有多个跟节点的时候，‍‍你会发现传递过来的Non-Props属性它就不会生效了，

但是如果我想让它生效，‍‍我可以怎么办？
我可以这么去写。‍‍v-bind等于$attrs，

这个时候你通过刚才的v-bind等于$attrs这样的语法，可以告诉Vue，‍‍父组件传递过来的这些Non-Props属性，我要把它统统的放到哪里去？‍‍放到第二个Counter上面去，所以$attrs它代表的是什么？它代表的不仅仅是你传递过来的‍‍属性和它的值，【第17行】

比如说你有多个，

你会发现是不是所有你的‍‍父组件传递过来的Non-Props属性都会放到第二个子组件的div标签上，‍‍原因就是v-bind等于$attrs，它的意思就是把子组件传递过来的所有的 Non-Props属性都放到v-bind等于$attrs这个元素上面来。‍‍

除了这么写，其实还有一些其他的写法，
比如说我可以这么去写，

如果向第一个div标签上去展示传递过来的 hello这样的Non-Props特性，‍‍怎么去做？

我可以让它等于$attrs点msg，如果你想拿到某一个Non-Props特性，你可以通过attrs点某个Non-Props特性 这种方式去获取到，当然你怎么给到div上，你可以通过v杠bind的指令‍‍往上加这种标签的属性就可以了。‍‍

当然你要加v杠bind的原因是后面这个东西不是个字符串，‍‍而是一个js的表达式，所以前面就要加冒号。‍‍

同理我想让第三个去展示 message，怎么办？

我们会发现这个时候你可以把hello world1放到第三个标签上，‍‍所以你会发现其实你用它单独用一个的话，通过v杠bind某一个属性的名字加上属性的值 这种方式你可以去绑定，但是你要把所有东西都绑定的，你可以用v杠bind，‍‍直接等于$attrs就可以了，

我们说父组件给子组件传递这些Non-Props属性的时候，‍‍子组件除了在模板里面可以通过v杠bind的指令去用，其实还可以在其他的地方用，比如说我们写一个生命周期函数就叫mounted， mounted指的是当子组件渲染完成之后，它就会自动的被执行的一个函数。‍‍

在这里面其实我也可以获取到Non-Props属性，怎么获取？

我们直接通过this点‍‍$attrs这种方式去获取就行了，
打开console 我们会发现，这里面它有一个proxy代理:

代理你可以看到它能获取到message和message1。

你接收的要通过props来接收，如果你没有props进行接收，那么‍‍你传递过来的内容你得怎么才能用到呢？
第一种方法，就是v-bind直接去把它全部的用到某一个标签上。‍‍
第二种方法是取其中的某一个属性，怎么取呢？‍‍
直接也用v-bind的指令就行了，但主要借助的还是$attrs这样的系统自带的属性或者系统自带的变量。‍‍
如果你生命周期函数里，或者在js的一些方法里面想用‍‍传递过来的这种Non-Props属性的话，怎么用?
this点$attrs点message就可以了。‍‍