In my previous post, “Vue Advanced: Slot”, I mainly explained the basic usage of slots in Vue. In this post, I will explain how to use Vue slots and slot and slot-scope instructions in higher version.

demo

Anonymous slot

The < body > < div id = "app" > < Test > < div > slot slot placeholder content < / div > < / Test > < / div > < template id = "Test" > < div > < slot > < / slot > / / define slot <h3> </div> </template> </body> <script> Vue.component(' test ',{template:"#test"}); new Vue({ el:"#app", }) </script>Copy the code

A named slot

<body> <div id="app"> <Test> <div slot="header"> </div>// Named slot uses <div slot="footer"> <template id="test"> <div> <slot name="header"></slot>// named slot < H3 > </template> </body> <script> Vue.component( 'Test',{ template:"#test" }); new Vue({ el:"#app" }) </script>Copy the code

v-slot

When v-slot is used as a slot placeholder in a component, it also defines a name for the slot slot using the name attribute in the slot tag. But it’s a little different when you use it in HTML. The template template tag is used. Within the template tag, the V-slot directive is used to bind the slot name, and the content to be added is written to the tag.

<body> <div id="app"> <Test> <template V-slot :header> <template V-slot :footer> <h2> Slot tail contents </h2> </template> </Test> </div> <template id =' Test '> <div class="container"> <header> <! <slot name = "header"></slot>// named slot </header> <section> Body content part </section> <footer> <! <slot name = 'footer'></slot> </footer> </div> </template> </body> <script> Vue.component('Test',{ template:"#test" }); new Vue({ el:"#app" }) </script>Copy the code



Scope slot:

Slot – use scope:

  1. Write the desired slot slot in the component template and v-bind the data for the current component to the slot label.
  2. When the component is in use, slot-scope= “scope” is used to receive data bound to the slot label in the component.
  3. You can use the bound data with scope.xxx
<body> <div id="app"> <Test> <div slot="default" slot-scope="scope"> < / Test > < / div > < template id = "Test" > < div > < slot name = "default" : MSG = "MSG" > < / slot > < p > this is the Test component < / p > < / div > < / template > </body>Copy the code
< script > new Vue ({el: "# app," components: {' Test ': {template: "# Test", the data () {return {MSG: "hello"}},}}}) < / script >Copy the code



Scope slot: Usage of v-slot

The < body > < div id = "app" > < Test > < template v - slot: header = "scope" > / / v - slot definition scope slot < div > < h3 > slot < / h3 > < p > {{scope. MSG}} < / p > < / div > < / template > < / Test > < / div > < template id = "Test" > < div > < slot name = "header" : MSG = "MSG" > < / slot > < p > this is the Test component < / p > </div> </template> </body> <script> Vue.component('Test',{template:"# Test ", data(){return {MSG :' here is the header '}}}); new Vue({ }).$mount("#app") </script>Copy the code



Vue2.6.0The use ofv-slotInstructions replace special featuresslotwithslot-scopeBut as can be seen from the above case,v-slotWhen in use, need intemplateInside the tag, that’s something you should be aware of when you’re using it.