✔ （1）1-1 组件的定义及复用性，局部组件和全局组件（1） ✔（2）1-2 组件的定义及复用性，局部组件和全局组件（2） ✔（3）1-3 组件间传值及传值校验 ✔ （4）1-4 单项数据流的理解 ✔（5）1-5 Non-Props 属性是什么 （6）1-6 父子组件间如何通过事件进行通信（1） （7）1-7 父子组件间如何通过事件进行通信（2） （8）1-8 组件间双向绑定高级内容（选学） （9）1-9 使用插槽和具名插槽解决组件内容传递问题（1） （10）1-10 使用插槽和具名插槽解决组件内容传递问题（2） （11）1-11 作用域插槽 （12）1-12 动态组件和异步组件 （13）1-13 基础语法知识点查缺补漏 （14）2-1 使用 Vue 实现基础的 CSS 过渡与动画效果 （15）2-2 使用 transition 标签实现单元素组件的过渡和动画效果（1） （16）2-3 使用 transition 标签实现单元素组件的过渡和动画效果（2） （17）2-4 使用 transition 标签实现单元素组件的过渡和动画效果（3） （18）2-5 组件和元素切换动画的实现 （19）2-6 列表动画 （20）2-7 状态动画 |
|
我们始终围绕是什么+为什么+怎么用 来输出所学收获 什么叫Non-Props？它的意思就是父组件给子组件传递内容的时候，子组件不通过props来接收。 当你去使用Non-Props特性的时候，也就是父组件向子组件传值，但是子组件不接收的情况， 在这个时候底层做一些什么样的操作，它会把父组件传递过来的内容放在子组件最外层的 DOM标签下，变成子组件最外层到标签的一个属性。 |
|
课程内容：
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就可以了。