This article mainly introduces the method of using slots to distribute content in Vue. Now I share it with you and give it as a reference.

tag is simply a placeholder. It will help you occupy the position. When you need it, you can directly pass in the html and it will display it for you. .

Some people also say: props can pass data from parent components to child components, and slots can pass html from parent components to child components. So how to achieve it?

Single slot:

     
  
 
我是父组件的标题
  
这是一些初始内容
 
这是更多的初始内容
  
   

Write the slot tag in the template in the component, and pass in html when the parent calls the child component.

Named slot:

     
  
  
这里可能是一个页面标题
 
主要内容的一个段落。
 
另一个主要段落。
 
这里有一些联系信息
  
   

Named slot, as the name suggests, when there are multiple slot tags, you need to give them their own names and call them in the parent component slot="internal corresponding name" is required. When there is an unnamed slot tag, the default html code passed in by the parent component will all be output in the unnamed slot tag.

Scope slot

A scope slot is a special type of slot used as a reusable template (that can be passed data), to replace already rendered elements.

In fact, it is equivalent to getting the props object passed by the child component in the parent component, and then rendering it to the parent component.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Bootstrap implements collapsible grouped side navigation menu

Vue.js Layer table data binding and implementation update Example

vue.js Example of nested loop, if judgment, dynamic deletion

The above is the detailed content of How to use slots to distribute content through slots in Vue. For more information, please follow other related articles on the PHP Chinese website!