Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "sample analysis of slot distribution in vue", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and study the "sample analysis of slot distribution in vue".

Slot distribution (multiple distributions)

Component templates-elements can use a special attribute, name, to configure how content is distributed. Multiple slot can have different names. The named slot will match the element in the content fragment that has the corresponding slot attribute

.panel {margin:10px;width:150px; border:1px solid # ccc}. Panel-header,.panel-bottom {height: 20px; background-color:antiquewhite;} .panel-body {min-height: 50px;} {{item.title}} {{item.desc}}

{{item.tims}} var panelTpl= {template:'#panelTpl'} var vm=new Vue ({el:'.app', components: {/ / registered component "panel2": panelTpl}, data: {list: [{title:' News title', description of desc:' one', tims:'2018-07-19'}) {title:' news title 2', description of desc:' 2', tims:'2018-07-18'}, {title:' news title 3', description of desc:' 3', tims:'2018-07-17'}]})

Multiple uses of slot basic usage / / components that do not have a slot or are not named will show the current export default {} / / use I will insert it into a slot called header I will insert import com from'@ / components/com.vue' into a slot called floot Export default {name: "App" Components: {com}} slot using data// component / / slotData indicates that the slot key value, if there is no slot or is not named, displays the current export default {data () {return {comData: {header: " I will insert it into a slot called header. " Floot: "I will insert into the slot named floot"}, / / use / / must use template package V-slot is followed by the slot name Key value {{slotData.header}} represented in slotData slot {{slotData.floot}} import com from'@ / components/com.vue' Export default {name: "App", components: {com}} dynamic slot / / component export default {data () {return {comData: {header: "I will insert into the slot called header" Body: "I will insert into a slot called body"} } / / use {{slotData [slotName]}} Change dynamic slot import com from'@ / components/com.vue' Export default {name: "App", components: {com}, data () {return {slotName: "header"}}, methods: {changeSlotName () {this.slotName = this.slotName = "header"? "body": "header";} above is all the content of the article "sample Analysis of slot Distribution in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.