vue中插槽的使用

//定义插槽 占位

<slot name="title"></slot>

//使用插槽

<template slot="title">{{ item.name }}</template>

<div id="itany">

<!-- <my-hello>wbs17022</my-hello> -->

<my-hello>

    <ul slot="s1">

                <li>aaa</li>

                <li>bbb</li>

                <li>ccc</li>

    </ul>

    <ol slot="s2">

                <li>111</li>

                <li>222</li>

                <li>333</li>

    </ol>

</my-hello>

</div>

<template id="hello">

<div>

    <slot name="s2"></slot>

    <h3>welcome to itany</h3>

    <!-- <slot>如果没有原内容，则显示该内容</slot> -->

    <slot name="s1"></slot>

</div>

</template>

<script>

var vm=new Vue({

    el:'#itany',

    components:{

            'my-hello':{

                  template:'#hello'
            }

    },

    mounted(){

          console.log('this.$slots.defaut',this.$slots.default)

    }

});
</script>