Non-props属性

Non-props属性：父组件给子组件传递内容时，子组件不通过pros接收时使用。

子组件存在单个根节点

子组件存在单个根节点时，vue底层会将父组件传递过来的内容置于子组件最外层标签上，变成子组件最外层签的一个属性。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>vue -- Non-props</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            template:`
            <div>
                <demo count="hello"/>
            </div>
            `
        })
        app.component('demo', {
            template:`<div></div>`
        })
        const vm = app.mount('#root');
    </script>
</body>
</html>

Non-props属性将 count="hello" 放在子组件最外层标签上。

页面效果： 在这里插入图片描述

inheritAttrs

如果不希望在子组件的标签上展示该属性，可以通过inheritAttrs: false,不继承父组件传过来的non-props属性。

示例代码：

  	const app = Vue.createApp({
            template:`
            <div>
                <demo count="hello"/>
            </div>
            `
        })
        app.component('demo', {
            inheritAttrs: false,
            template:`<div></div>`
        })

页面效果： 在这里插入图片描述

子组件存在多个根节点

获取所有属性

可以通过v-bind指令,v-bind='$attrs'，把父组件传递过来的所有non-props属性放到指定div上。

示例代码：

	const app = Vue.createApp({
            template:`
            <div>
                <demo count="hello" msg="vue"/>
            </div>
            `
        })
        app.component('demo', {
            inheritAttrs: false,
            template:`
            <div v-bind="$attrs"></div>
            `
        })

页面效果： 在这里插入图片描述

获取具体属性

可以通过v-bind指令:msg='$attrs.msg'，把父组件传递过来的具体属性non-props属性放到指定div上。

示例代码：

	const app = Vue.createApp({
            template:`
            <div>
                <demo count="hello" msg="vue"/>
            </div>
            `
        })
        app.component('demo', {
            inheritAttrs: false,
            template:`
            <div :count="$attrs.count"></div>
            <div :msg="$attrs.msg"></div>
            <div v-bind="$attrs"></div>
            `
        })

页面效果：
在这里插入图片描述

在方法中获取属性

在方法中通过this.$attrs，把父组件传递过来的属性non-props属性放到指定div上。

示例代码：

 	const app = Vue.createApp({
            template:`
            <div>
                <demo count="hello" msg="vue"/>
            </div>
            `
        })
        app.component('demo', {
            inheritAttrs: false,
            mounted(){
                console.log(this.$attrs);
                console.log(this.$attrs.count);
                console.log(this.$attrs.msg);
            },
            template:`
            <div></div>
            `
        })

页面效果：
在这里插入图片描述

总结

Non-props属性： 父组件给子组件传递内容时，子组件不通过non-props接收时使用；

inheritAttrs: false： 可以使子组件标签上的不展示该属性；

v-bind='$attrs'： 父组件传递过来的所有non-props属性放到指定div上；

:msg='$attrs.msg': 把父组件传递过来的具体属性non-props属性放到指定div上；

方法中通过this.$attrs， 把父组件传递过来的属性non-props属性放到指定div上；

(完)