这节我们主要讲一下Non-props属性，那什么是Non-props属性呢？其实就是子组件没有接受父组件传递过来的参数，而子组件完全不变的复制了属性到自己的标签上，就叫做Non-props属性。我相信你现在还不能完全理解这句话，无所谓，我们继续学习。
基础页面和子组件的准备
为了展示Non-props属性的风采，我们需要编写一下讲解使用的代码，你可以把这个过程当作复习。新建Demo29.html文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo29</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: ` <h2>mybj123.com</h2>`
})
const vm = app.mount("#app")
</script>
</html>
然后我们再编写一个 Hello 的全局组件，代码如下。
app.component('Hello', {
template: `<h3>Hello World</h3>`
})
写好子组件后，在父组件中直接使用即可。
const app = Vue.createApp({
template: `
<h2>mybj123.com</h2>
<hello />
`
})
初始 Non-props 属性
上面的代码，我们并没有在子组件里接受任何传递过来的参数，就根本没有写props，但这时候在调用的时候，是仍然可以传值的。
const app = Vue.createApp({
template: `
<h2>mybj123.com</h2>
<hello msg="mybj" />
`
})
这时候你打开浏览器中的控制台，查看Elements标签，可以看到此时的<h3>标签上已经有了msg=mybj这样的属性，也就是父组件直接把属性移植给了子属性。
![29. [组件]Vue中的Non 1](/d/file/webqianduan/3palw0jrwt53palw0jrwt5.png "29. [组件]Vue中的Non 1")
这时候第二个<h3>标签就只复制了style属性。当然你也可以简写，去掉v-bind，而是用:代表。
app.component('Hello', {
template: `
<h3 v-bind="$attrs">Hello World</h3>
<h3 :style="$attrs.style">Hello World</h3>
<h3>Hello World</h3>
`
})
在业务逻辑中使用 Non-props 属性
刚才讲的都是在标签上使用Non-props属性，如果你想在业务逻辑中使用Non-props属性也是可以的。比如在生命周期中使用。
app.component('Hello', {
mounted() {
console.log(this.$attrs.msg)
},
template: `
<h3 v-bind="$attrs">Hello World</h3>
<h3 v-bind:style="$attrs.style">Hello World</h3>
<h3>Hello World</h3>
`
})
然后到浏览器中的控制台进行查看，就可以看到打印出了mybj字样。其实this.$attrs是 Vue 的一个常用属性，我们需要善于利用。