Vue 组件和插槽的理解与使用

<div id="demo1">
    <div>
        <h3>1、单个插槽</h3>
        <single>
            dsafd
        </single>
    </div>

    <muli-slots>
        <!--在html中不支持驼峰式的标签名，需改为横线式-->
        <h3 slot="header">2、多插槽/具名插槽</h3>
        <p>主要内容的一个段落。</p>
        <p>另一个主要段落。</p>
        <p slot="footer">这里有一些联系信息</p>
    </muli-slots>
    <!--作用域插槽-->
    <!--在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。
                slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：-->
    <div class="parent">
        <h3>3、作用域插槽</h3>
        <scoped-slot>
            <template slot-scope="props">
                        <!--这里的props指的是子组件的props-->
                            <span>this is from parent</span>
                            <span>{{props.msg}}</span>
                        </template>
        </scoped-slot>
    </div>
    <div>
        <h3>4、使用render代替子组件中的template</h3>
        <render-slot></render-slot>
    </div>
    <div>
        <h3>5、子组件中同时存在template和render函数</h3>
        <render-template></render-template>
    </div>
    <div>
        <h3>6、在render函数中使用作用域插槽</h3>
        <render-scope>
            <template slot-scope="props">
                                <p>{{props.msg}}</p>
                            </template>
        </render-scope>

    </div>

    <!--父组件通过props向子组件传值-->
    <div class="parent">
        <h3>7、父组件通过props向子组件传值，值在template的slot标签中接收</h3>
        <!--传递的值需要写在子组件的标签中-->
        <child datamsg="传递的值" msg2="第二个值"></child>
    </div>

    <div>
        <h3>8、父组件通过props向子组件传值，值在render函数返回的createElement函数中接收</h3>
        <child-render msg="render send data">
            <template slot-scope="props">
                        <em>{{props.text}}</em>
                    </template>
        </child-render>
    </div>
    <div>
        <h3>9、与8等价的template</h3>
        <child-render-template msg="template send data">
            <template slot-scope="props">
                                <em>{{props.text}}</em>
                            </template>
        </child-render-template>
    </div>
</div>

 //单个插槽
        Vue.component('single', {
            //<slot> 不能作为根元素,当<single>标签为空元素时，会显示<slot>里面的内容
            template: '<div><slot>单个插槽</slot></div>'
        })

        //多个插槽/具名插槽
        Vue.component('muliSlots', {
            template: `
                <div>
                    <header> <slot name="header"></slot></header>
                    <main><slot>没有内容时，这个会出现</slot></main>
                    <footer><slot name="footer"></slot></footer>
                </div>
            `
        })

        //作用域插槽
        //作用域插槽是一种特殊类型的插槽，用作一个(能被传递数据的)可重用模板，来代替已经渲染好的元素。
        Vue.component('scopedSlot', {
            template: `
                <div class="child">
                    <slot msg="this is from child"></slot>
                </div>
            `
        })

        //使用render代替template
        Vue.component('renderSlot', {
            render(createEle) {
                return createEle('em', 'render test')
            }
        })

        // render 和 template同时存在的情况,会忽略template
        Vue.component('render-template', {
            template: '<div>this is from template</div>',
            render(createEle) {
                return createEle('div', 'this is from render')
            }
        })

        //render 使用作用域插槽
        Vue.component('render-scope', {
            render(createEle) {
                return createEle('p', this.$scopedSlots.default({
                    msg: 'this is from render-scopeded slot'
                }))
            }
        })

        //父组件传值
        Vue.component('child', {
            props: ['datamsg', 'msg2'],
            template: '<div><p>{{datamsg}}</p><p>{{this.msg2}}</p></div>'
        })

        //父组件使用render 传值
        Vue.component('child-render', {
            props: ['msg'], //this is from parent
            //<div><slot text="this is from render-scopeded slot"><slot><p>{{msg}}</p></div>
            render(createEle) {
                var p = createEle('p', {
                    domProps: {
                        innerHTML: this.msg //这里的this不能省略
                    }
                })
                return createEle('div', [this.$scopedSlots.default({
                    text: 'this is from render-scopeded slot' //子组件自己的props属性
                }), p])
            }
        })

        //与上面等价的template
        Vue.component('child-render-template', {
            props: ['msg'], //this is from parent
            template: `<div>
                <slot text="this is from render-scopeded slot"></slot>
                <p>{{msg}}</p>
            </div>`
        })
        new Vue({
            el: '#demo1'
        })