vue Render中slots的使用的实例代码
本文介绍了vue Render中slots的使用的实例代码，有需要了解vue Render中slots用法的朋友可参考。希望此文章对各位有所帮助。
render 中 slot 的一般默认使用方式如下：
this.$slots.default 对用 template的<slot>的使用没有name 。
想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。
<body>
<div class="" id="app">
<myslot>
<div>this is slot</div>
</myslot>
</div>
<script>
Vue.component('myslot',{
render:function(createElement){
var he=createElement('div',{domProps:{innerHTML:'this child div'}});
return createElement('div',[he,this.$slots.default])
}
});
var app=new Vue({
el:'#app'
})
</script>
</body>
多个slot的使用
<body>
<div class="" id="app">
<myslot>
<div slot="name1">this is slot</div>
<div slot="name2">The position is slot2 </div>
</myslot>
</div>
<script>
Vue.component('myslot',{
render:function(createElement){
var he=createElement('div',{domProps:{innerHTML:'this child div'}});
return createElement('div',[he,this.$slots.name2,this.$slots.name1])
}
});
var app=new Vue({
el:'#app'
})
</script>
</body>
在vue2.1.0新添加了scope(虽然感觉有点怪，但是用习惯了，还蛮好用的)。同样给出一般使用和多个使用示例，
<body>
<div class="" id="app">
<myslot>
<template scope="props">
<div>{{props.text}}</div>
</template>
</myslot>
</div>
<script>
Vue.component('myslot',{
render:function(createElement){
var he=createElement('div',{domProps:{innerHTML:'this child div'}});
return createElement('div',[he,this.$scopedSlots.default({
text:'hello scope'
})])
}
});
var app=new Vue({
el:'#app'
})
</script>
</body>
多个$scopedSlot的使用
<body>
<div class="" id="app">
<myslot>
<template slot="name2" scope="props">
<div>{{props.text}}</div>
</template>
<template slot="name1" scope="props">
<span>{{props.text}}</span>
</template>
</myslot>
</div>
<script>
Vue.component('myslot',{
render:function(createElement){
var he=createElement('div',{domProps:{innerHTML:'this child div'}});
return createElement('div',
[he,
this.$scopedSlots.name1({
text:'hello scope'
}),
this.$scopedSlots.name2({
text:'$scopedSlots using'
})])
}
});
var app=new Vue({
el:'#app'
})
</script>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue slots 组件的组合/分发实例，包括了vue slots 组件的组合/分发实例的使用技巧和注意事项，需要的朋友参考一下 使用slots 分发内容 使用组件时常常会有组件组合使用的情况，如下： 直接套用组件的话，父级组件会将子级组件覆盖掉，不能实现需求的效果，为了实现该效果就需要使用 slots来内容分发 slots的使用方法如下： <app></app>标签没有引入其他组件
-
本文向大家介绍深入浅析Vue中的slots/scoped slots，包括了深入浅析Vue中的slots/scoped slots的使用技巧和注意事项，需要的朋友参考一下 一直对Vue中的slot插槽比较感兴趣，下面是自己的一些简单理解，希望可以帮助大家更好的理解slot插槽 下面结合一个例子，简单说明slots的工作原理 dx-li子组件的template如下： 传递的插槽内容'hello ju
-
本文向大家介绍solr在java中的使用实例代码，包括了solr在java中的使用实例代码的使用技巧和注意事项，需要的朋友参考一下 SolrJ是操作Solr的Java客户端，它提供了增加、修改、删除、查询Solr索引的JAVA接口。SolrJ针对 Solr提供了Rest 的HTTP接口进行了封装， SolrJ底层是通过使用httpClient中的方法来完成Solr的操作。 jar包的引用（mave
-
本文向大家介绍PHP中的traits实现代码复用使用实例，包括了PHP中的traits实现代码复用使用实例的使用技巧和注意事项，需要的朋友参考一下 PHP5.4后新增traits实现代码复用机制，Trait和类相似，但不能被实例化，无需继承，只需要在类中使用关键词use引入即可，可引入多个Traits，用','隔开。 （1）Trait简单使用 （2）优先级问题 Trait会覆盖继承的方法，当前类会
-
本文向大家介绍Spring Boot使用Log4j2的实例代码，包括了Spring Boot使用Log4j2的实例代码的使用技巧和注意事项，需要的朋友参考一下 前言 Spring Boot 默认使用Logback,来打印日志，这里还想说的SLFJ(Simple Logging Facade for Java)，它们之间的关系，一张图，说明一切： maven 配置 log4j2.xml 配置 Log
-
本文向大家介绍angular中使用Socket.io实例代码，包括了angular中使用Socket.io实例代码的使用技巧和注意事项，需要的朋友参考一下 服务端(nodeJs/express): 客户端，创建一个ChatService ChatComponent 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。