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

Vue default slot understanding and example code is how, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

What is a slot?

A slot is a placeholder in a child component that is provided to the parent component, indicating that the parent component can fill this placeholder with any template code, such as HTML, component, etc., and the filled content replaces the label of the child component.

Understanding of default slots

Is to use the full tag () to write the corresponding configuration in its full tag (for example: the features we need)

Then use the default slot label to put the written into this slot (this slot generally exists in the child component, so you can give what the parent component has written to the child component)

The style of the configuration written in the full tag can be written either in the parent component or in the child component (because, 1. When the style is written in the parent component, the style has been rendered and then put into the child component; 2. When the style is written in the child component, put the configuration into the slot, and the sub-component of the slot has a css style that will render our configuration)

Code snippet

① Category.vue

{{title}} classify export default {name: "Category", props: ["title"],}; .category {background-color: skyblue; width: 200px; height: 300px;} h4 {text-align: center; background-color: orange;}

② App.vue

{{g}} import Category from ". / components/Category" Export default {name: "App", components: {Category}, data () {return {foods: ["Fire Goo", "your Meat", "meatballs"], games: ["Red Alert online", "Crossing the Line of Fire", "strong Dance Troupe"], films: ["Godfather", "bomb disposal expert", "awesome"],} .container {display: flex; justify-content: space-around;} video {width: 100%;} img {width: 100%;} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.