vue插槽之slots

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .panel{
            border: 1px solid #ececec;
        }
        .panel>*{
            padding:10px;
        }
        .title{
            border-bottom: 1px solid #ececec;
        }
        .content{
            border-bottom: 1px solid #ececec;
        }
        .footer{

        }
    </style>
</head>
<body>
<div id="app">
    <panel>
        <div slot="title">YO</div>
        <div slot="content">
            YO
            yo
        </div>
        <div slot="footer">更多信息</div>
    </panel>
</div>

<template id="panel-tpl">
    <div class="panel">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js:

Vue.component('panel', {
    template: '#panel-tpl'
})
new Vue({
    el: '#app'
})

作用域插槽:

父组件通过props向子组件传值,作用域插槽差不多是父子组件传值的反用,是父组件接收来自子组件的slot标签上通过v-bind绑定进而传递过来的数据。

    <child :prop-name="items">
        <!--作用域插槽也可以具名!-->
        <li slot="slotName" slot-scope="scopeName">
            {{scopeName.dos}}
        </li>
    </child>
    Vue.component('child',{
        template: `
          <ul>
            <slot name="slotName"
            v-for="item in propName"
            :dos="item.do"></slot>
          </ul>
        `,
        props: ['propName']
    });

    new Vue({
        el:"#app",
        data:{
            items:[
                {do:'play'},
                {do:'eat'},
                {do:'sleep'},
                {do:'play'},
                {do:'eat'},
                {do:'sleep'}
            ]
        }
    });
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭