零基础学习Vue: 第27课 Vue子组件插槽引入与插入方法与获取方法$slots

程序员文章站 2022-04-24 09:48:41

...

零基础学习Vue: 第27课 Vue子组件插槽引入与插入方法与获取方法$slots

以下是代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 4.引入子组件 -->
    <son>
        <!-- 5.插入插槽 -->
        <!-- 插入name=qqq插槽 -->
        <h1 slot="qqq">测试标题</h1>
        <!-- 测试插入name=www插槽 该插槽没有 -->
        <p slot="www">测试内容</p>

        <!-- 必须要用template标签  必须要用slot-scope属性 -->
        <template slot='admin' slot-scope="result">
            <ul>
                <li v-for="(item,index) in result.admin">
                    {{index}}--{{item}}
                </li>
            </ul>
        </template>
    </son>

</div>

<!-- 3.设置son样式标签 -->
<template id="son">
    <div>
        <slot :admin="arr" name="admin"></slot>
        <!-- name="qqq"的插槽在下面则父组件插入的标签也在下面 -->
        <slot name="qqq"></slot>
        <!-- 定义一个name=xxx的插槽，并不插入数据 -->
        <slot name="xxx"></slot>
        {{a}}
    </div>
</template>

<script>
    //1.定义子组件son
    let son = {
        template:'#son',
        data(){
            return {
                a:'我是子组件的数据',
                arr:['抽烟','喝酒','烫头']
            }
        },
        mounted(){
            console.log(this)
            console.log(this.$slots);   //获取父组件插入的插槽数
        }
    }
    
    //定义vue组件
    let vm = new Vue({ 
        el:'#app',
        data:{
          a:'父组件的数据'
        },
        components:{    //2.注册子主件
            son
        }
    })
</script>
</body>
</html>

运行结果如下：

零基础学习Vue: 第27课 Vue子组件插槽引入与插入方法与获取方法$slots

上一篇：零基础学习Vue: 第35课 query与params的用法：

下一篇： Vue的学习（4）