vue插槽

基本使用

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    <cpn ref="aaa"><button>按钮</button> </cpn>
    <cpn ref="aaa"><span>aaaaa</span> </cpn>
    <cpn ref="aaa"><input type="text"> </cpn>
    <cpn ref="aaa"> </cpn>
    </div>

    <template id="cpn">
        <div>
        <div>我是子组件</div>
        <!-- <button>按钮</button> -->
        <!-- 可以给默认值 -->
        <!-- 一个插槽时， 有多个标签，一起替换 -->
        <slot><button>按钮</button></slot>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        
        const cpn = {
            template:'#cpn',
            methods:{
                
            }
        }


        const app = new Vue({
            el: "#app",
            data:{
                message: "hello world",
            },
            // 局部组件注册
            components:{
                cpn
            },
            methods:{
               
            }
            
        })

    </script>
</body>
</html>
复制代码

 

具名插槽

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    <cpn><span slot="l">左边</span> <span slot="r">右边</span></cpn>
    </div>

    <template id="cpn">
        <div>
        <div>我是子组件</div>
        <slot name="l"><span>l</span></slot>
        <slot name="c"><span>c</span></slot>
        <slot name="r"><span>r</span></slot>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        
        const cpn = {
            template:'#cpn',
            methods:{
                
            }
        }


        const app = new Vue({
            el: "#app",
            data:{
                message: "hello world",
            },
            // 局部组件注册
            components:{
                cpn
            },
            methods:{
               
            }
            
        })

    </script>
</body>
</html>
复制代码

 

具名插槽作用域

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 父组件替换插槽标签， 但是内容还是由子组件来提供 -->
    <div id="app">
    <cpn></cpn>
    <cpn>
        <!-- 目的是取到lauguage中的数据 -->
        <template slot-scope="slot">
            <!-- <span v-for="item in slot.data">{{item}} </span> -->
            <span>{{slot.data.join(' - ')}} </span>
        </template>
    </cpn>
    <cpn></cpn>
    </div>

    <template id="cpn">
        <div>
        <div>我是子组件</div>
        <slot :data="lauguage">
            <ul>
                <li v-for="item in lauguage">{{item}}</li>
            </ul>
        </slot>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        
        const cpn = {
            template:'#cpn',
            data(){
                return {
                    lauguage:["python", "java", "javaScript", "c++", "go"]
                }
            },
            methods:{
                
            }
        }


        const app = new Vue({
            el: "#app",
            data:{
                message: "hello world",
            },
            // 局部组件注册
            components:{
                cpn
            },
            methods:{
               
            }
            
        })

    </script>
</body>
</html>
复制代码

 

posted @   Wchime  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
·  vue父子组件
·  vue事件监听
·  2021-07-21 vue插槽
·  Vue插槽详解
·  vue中的插槽
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手