vue插槽slot

最新推荐文章于 2022-10-11 15:52:02 发布

weixin_33875839

最新推荐文章于 2022-10-11 15:52:02 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/666775

博客介绍了父组件使用子组件时，采用双标签形式可通过插槽获取标签中内容。还给出官网的几个demo，包括具名插槽、默认值、作用域插槽等示例，展示了JavaScript中相关的使用方法。

前言

当父组件在使用一个子组件的时候，可以使用单标签的形式，也可以使用双标签的形式，比如<Child /> 或者<Child></Child>。当时使用双标签的形式时，如果我们在两个标签中放入一些内容，比如<Child>hello world</Child>，子组件是可以通过插槽slot来获取标签中的内容，下面是官网的几个demo

demo1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="app">
            <!-- 使用子组件 -->
            <navigation-link>这是父组件上的一些内容</navigation-link>
        </div>
    </body>
</html>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 注册子组件navigation-link
    Vue.component('navigation-link', {
        data() {},
        // 如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。
        template: `
            <a v-bind:href="url" class="nav-link" >
              <slot></slot>
            </a>`
     })
    
    new Vue({
        el: '#app',
        data: {
            
        }
    })
</script>

demo2-具名插槽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <base-layout>
                <!-- template 也可以是个普通元素,请看footer的slot -->
              <template slot="header">
                <h1>页面标题</h1>
              </template>
            
              <p>A paragraph for the main content.</p>
              <p>And another one.</p>
            
              <div slot="footer">
                <mark>页面底部信息</mark>
              </div>
            </base-layout>
        </div>
    </body>
</html>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // slot具名以后就可以插到对应的位置,否则规则跟非具名插槽一样
    Vue.component('base-layout', {
        template: `
            <div class="container">
              <header>
                <slot name="header"></slot>
              </header>
              <main>
                <slot></slot>
              </main>
              <footer>
                <slot name="footer"></slot>
              </footer>
            </div>`
    })
    
    new Vue({
        el: '#app'
    })
</script>

demo3-默认值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <Child>提交</Child>
            <!--当Child中间不传入内容时使用默认值-->
            <Child></Child>
        </div>
    </body>
</html>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    Vue.component('Child',{
        template: `
            <button type="submit">
              <slot>Submit</slot>
            </button>`
    });
    
    new Vue({
        el: '#app'
    })
    
</script>

demo4-作用域插槽

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <todo-list :todos="todos">
                <!-- 用slot-scope接收子组件回传的信息 -->
                <template slot-scope="slotProps">
                    <span v-if="slotProps.todo.isComplete"></span> {{ slotProps.todo.text }}
                </template>
            </todo-list>
        </div>
    </body>
</html>

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    Vue.component('todo-list', {
        props: ['todos'],
        template: `
            <ul>
              <li
                v-for="todo in todos"
                v-bind:key="todo.id">
                <!-- 回传信息 -->
                <slot v-bind:todo="todo">
                  {{ todo.text }}
                </slot>
              </li>
            </ul>`
    })

    new Vue({
        el: '#app',
        data: {
            todos: [
            {
                text: '买机械键盘',
                isComplete: true
            }, {
                text: '打羽毛球',
                isComplete: true
            },
            {
                text: '去教会做礼拜',
                isComplete: false
            }]
        }
    })
</script>