透传属性

透传属性

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./js/vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <child id="name" style="color: red;" class="home1"></child>
        <!-- 最终效果 -->
        <!-- <div id="name" class="home2 home1"
            style="font-size: 20px; color: red;">我是一个子组件</div> -->
    </div>
    <!-- 
        透传属性：将属性在组件通过属性传递的方法，属性值传递给子组件的根标签
        A 如果是普通的属性，那么你传递的内容会覆盖子组件根标签
        B 如果是class或者是style 就共存

     -->
    <script>
        /* 
           list 数据 props 接收
           @abc 方法 emits 接收
           id,class,style 属性 attrs 接收 => 透传属性 
        */
       const child = {
        template:`
        <div id="age" style="font-size:20px;" class="home2">我是一个子组件</div>
        `
       }
        const app = Vue.createApp({
            // 局部注册
            components:{
                child
            },
            data() {
                return {

                }
            }
        })
        app.mount('#app')
    </script>
</body>

</html>

最后编辑于：2023.07.27 00:08:28

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

透传属性

相关阅读更多精彩内容

友情链接更多精彩内容