vue slot与slot-scope示例

注意：以下示例以最新版本vue为主，最低需要2.6.0版本

一、具名组件简单示例

hello world

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="js_app">
    <foo>
        <template slot="title">
            <strong>{{ msg }}</strong>
        </template>
    </foo>
</div>
<!-- 模板 -->
<script type="x-template" id="foo">
    <div>
        <slot name="title"></slot>
    </div>
</script>

<script>
    // 局部组件
    var Foo = {
        template: '#foo'
    }

    var app = new Vue({
        el: '#js_app',
        data: {
            msg: 'hello world'
        },
        components: {
            foo: Foo
        }
    })
</script>

template模板官方使用说明：https://cn.vuejs.org/v2/api/#template

二、作用域插槽slot-scope

slot-scope就是把组件内的数据拿出来在模板里渲染（实现子父组件通信），名称可以为任意， 也可以直接使用解构赋值

姓名：tom 年龄：22

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="js_app">
    <foo>
        <template slot="title" slot-scope="any">
            <strong>{{ msg }}</strong>
            <ul>
                <li v-for="(v, k) in any.list" :key="k">姓名：{{ v.name }} 年龄：{{ v.age }}</li>
            </ul>
        </template>
    </foo>
</div>
<!-- 模板 -->
<script type="x-template" id="foo">
    <div>
        <slot name="title" :list="list"></slot>
    </div>
</script>
<script>
// 局部组件
var Foo = {
    data: function() {
        return {
            list: [
                {name: 'tom', age: 22}
            ]
        };
    },
    template: '#foo'
}

var app = new Vue({
    el: '#js_app',
    data: {
        msg: 'hello world'
    },
    components: {
        foo: Foo
    }
})
</script>

slot-scope官方使用说明：https://cn.vuejs.org/v2/guide/components-slots.html#%E5%B8%A6%E6%9C%89-slot-attribute-%E7%9A%84%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD

欢迎关注：http://fenxianglu.cn/