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

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

    <muli-slots>
        
        <h3 slot="header">2、多插槽/具名插槽h3>
        <p>主要内容的一个段落。p>
        <p>另一个主要段落。p>
        <p slot="footer">这里有一些联系信息p>
    muli-slots>
    
    
    <div class="parent">
        <h3>3、作用域插槽h3>
        <scoped-slot>
            <template slot-scope="props">
                        
                            <span>this is from parentspan>
                            <span>{{props.msg}}span>
                        template>
        scoped-slot>
    div>
    <div>
        <h3>4、使用render代替子组件中的templateh3>
        <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>

    
    <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等价的templateh3>
        <child-render-template msg="template send data">
            <template slot-scope="props">
                                <em>{{props.text}}em>
                            template>
        child-render-template>
    div>
div>

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

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

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

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

        // render 和 template同时存在的情况,会忽略template
        Vue.component('render-template', {
            template: '
this is from template
',
            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: '
{{datamsg}}
{{this.msg2}}
'
        })

        //父组件使用render 传值
        Vue.component('child-render', {
            props: ['msg'], //this is from parent
            //
{{msg}}
            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>
                text="this is from render-scopeded slot">
                
{{msg}}
            div>`
        })
        new Vue({
            el: '#demo1'
        })