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.js框架實現(xiàn)火車票查詢系統(tǒng)(附源碼)
這篇文章主要介紹了利用Vue.js框架實現(xiàn)火車票查詢系統(tǒng)的相關資料,,文中給出了詳細的介紹與示例代碼,并在文章結尾給出了完整的項目下載,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue.config.js配置報錯解決辦法(可能是與webpack混淆)
在Vue.js開發(fā)過程中,vue.config.js文件是用于配置項目的,特別是對于開發(fā)環(huán)境的設置,這篇文章主要給大家介紹了關于vue.config.js配置報錯解決的相關資料,可能是與webpack混淆,需要的朋友可以參考下2024-06-06vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09