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

标签: Vue.js 前端
5人阅读 评论(0) 收藏 举报
分类:
<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'
        })

转载地址:原文链接

查看评论

VUE构建工具

-
  • 1970年01月01日 08:00

作用域插槽列表的简单应用实例

作用域插槽列表的简单应用实例
  • wangxiaoxiaosen
  • wangxiaoxiaosen
  • 2017-07-25 17:24:43
  • 1272

作用域插槽理解

本篇讲一下作用域插槽的理解,本汪认为是子组件与父组件的数据动态交互的一种常见案例,二话不说先上代码:...
  • vOv_OvO
  • vOv_OvO
  • 2017-10-11 17:53:28
  • 589

vue动态组件和slot插槽

template> div class="parent"> ul> li @click="setNav(1)">导航一li> li @click="setNav(2...
  • fly18702787810
  • fly18702787810
  • 2017-08-17 11:50:11
  • 545

Vue使用具名插槽细节

元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。 仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段...
  • m0_37690351
  • m0_37690351
  • 2017-09-22 10:16:13
  • 716

vue使用插槽分发内容slot的用法

将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 &amp;lt;son-tmp&amp;gt; &amp;lt;div&amp;gt;我是文字,我需要放到son...
  • kingov
  • kingov
  • 2017-10-20 11:13:44
  • 3140

单个插槽及具名插槽理解

插槽就是动态交互父子组件之间的数据的机器臂,二话不说上代码:
  • vOv_OvO
  • vOv_OvO
  • 2017-10-10 20:59:19
  • 369

vue中slot插口的用法

关于vue中slot插口的作用可以借助input中的placeholder属性来理解。
  • wangxiaoxiaosen
  • wangxiaoxiaosen
  • 2017-07-19 16:16:06
  • 2059

如何理解vue的slot

如何理解vue的slot插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽的原理和Angul...
  • u014628388
  • u014628388
  • 2017-07-25 23:41:41
  • 1063
    个人资料
    持之以恒
    等级:
    访问量: 2222
    积分: 133
    排名: 116万+
    文章存档