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

This article mainly introduces the relevant knowledge of how to use the vue architecture slot slot, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use the vue architecture slot slot. Let's take a look at it.

1. Direct use

Create a new component Article

Date: 2022-01-15

Create a new Learn and use Article in Learn

Learn.vue and Article.vue are in the same folder.

Send Lang to Yangzhou in August and sleep alone in the painting building. It is not good for a woman to open it, but she is worried about import Article from'. / Article.vue'export default {components: {Article}}

Slot is equivalent to inserting div into the slot position in Article.

Running effect

2. Set the default value

Even when using slot, the default content will be displayed if not passed in, and the incoming content will be used if it is passed in.

If the default value is not set, nothing is displayed. The code is as follows

First, let's see if the default value is not set.

Article content

Date: 2022-01-15

Learn content

Import Article from'. / Article.vue'export default {components: {Article}}

Running effect

Set default value

Article content

Date: 2022-01-15 drunk under the fragrant tree, half buried by fallen flowers

Learn content

Import Article from'. / Article.vue'export default {components: {Article}}

Running effect

3. Multiple slot usage

Article content

Date: 2022-01-15

Learn content

In front of the window [author] Zhao Chonghui looked for land in front of the window and planted a plum. The bright moon breezes me, the world of mortals will never come again. Import Article from'. / Article.vue'export default {components: {Article}}

Set the value of the name attribute to the slot tag and correspond to it through v-slot

Running effect

V-slot:title can be abbreviated as # title with the following code

In front of the window [author] Zhao Chonghui looked for land in front of the window and planted a plum. The bright moon breezes me, the world of mortals will never come again. Import Article from'. / Article.vue'export default {components: {Article} 4, scope slot

Parent slots use data from child components

Article content

Date: 2022-01-15 {{article.content1}} export default {data () {return {article: {content1: 'since goodbye, remember to meet. A few times my soul dream is the same as Jun', content2: 'tonight, I am afraid to meet each other in a dream.

Learn content

{{slotProps.article.content2}} import Article from'. / Article.vue'export default {components: {Article}}

Running effect

Look at the difference between the upper and lower Article displays, the top shows content1, the bottom shows content2

The above code vMuthslotVue default= "slotProps" can be written simply as vMerslotte = "slotProps"

Abbreviated code

{{slotProps.article.content2}} import Article from'. / Article.vue'export default {components: {Article}}

Deconstructing slot Prop

In supported environments (single file components or modern browsers), you can use ES2015 to deconstruct and pass in a specific slot prop

The code is as follows

{{article.content2}} import Article from'. / Article.vue'export default {components: {Article}} 5, dynamic slot name

Article content

Date: 2022-01-15

Learn content

The wings without colorful Phoenix can't fly together, but the heart is like a telepathic connection. Change the slot name import Article from'. / Article.vue'export default {components: {Article}, data () {return {dynamicSlotName: 'title'}}, methods: {changeSlotName () {this.dynamicSlotName =' content'}

Running effect

This is the end of the article on "how to use vue Architecture slot slot". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use vue architecture slot slot". If you want to learn more, you are 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.