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

Editor to share with you what are the Vue slots to solve the communication between father and son components, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

Environmental preparation

Let's set up an initial environment to show you. Finish this slot step by step.

Is to write a category component to render these three kinds of data respectively.

Category component {{title}} {{item}} export default {props: {listData:Array, title: String}} .category {width: 200px; height: 300px; background-color:pink } App component import Category from'. / components/Category.vue'export default {name: 'App', components: {Category}, data () {return {games: [' Crossing the Line of Fire','QQ Speed', 'Locke Kingdom'], movies: ['Hello Li Huanying, 'Youth School', 'that year in a hurry'], foods: ['Shaoyang Rice Noodle', 'Changsha Tea Yan', 'Chongqing Hot Pot']}} # app {font-family: Avenir, Helvetica, Arial, sans-serif -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: # 2c3e50; margin-top: 60px; display: flex; justify-content: space-between;}

At first, it was the same demand as the picture above, but now the business requirements have changed, and the movie has changed to promote only one of them, the others without publicity, and the food to promote only one pull.

As shown below:

How can we change it properly?

Do you add if to the Category component to judge one by one? Or is there a better way?

One by one judgment is not good, that way the code will become very complicated, not easy to read, in case you want to change the business requirements later, the code is not easy to move.

Next, pull to the appearance of the default slot.

1. Default slot

Instead of using props to receive data or render, we define a slot in the subcomponent.

If the parent component does not pass a value, this default export default {props: {}} is displayed.

The App component has also made changes

Games

Movies

Foods {{item}} import Category from'. / components/Category.vue' export default {name: 'App', components: {Category}, data () {return {games: [' Crossing the Line of Fire','QQ Speed', 'Kingdom of Locke'] Movies: ['Hello Li Huanying', 'Youth School', 'that year in a hurry'], foods: ['Shaoyang Rice Noodle', 'Changsha Tea Yan', 'Chongqing Hot Pot']}

Display effect:

Explanation:

We have written in the child component that if this default label is displayed when the parent component does not pass a value, this is equivalent to taking up a place.

In the parent component, we no longer write autistic and tag as before, but write non-autistic and tagged content. In doing so, Vue will render the content written in the component tag by default, and then put it back in the occupied place in the subcomponent.

Note: the CSS style can be written in either the parent component or the child component, because it is returned to the child component after rendering. When written in a subcomponent, it is rendered when it is put back into the subcomponent.

After writing here, the customer suddenly felt that you were so powerful and dissatisfied, and began to give you a whole lot of trouble again.

Next, we will make our debut in the named slot again.

II. Named slots

Unexpectedly, we can think of using one slot, so why can't we try it with two slots?

Retrofit subcomponents

If the parent component does not pass a value, this default export default {props: {}} is displayed.

Parent component

Games

Qq logs in to Wechat and logs in to Movies

Click Foods {{item}} import Category from'. / components/Category.vue' export default {name: 'App', components: {Category} Data () {return {games: ['Crossing the Line of Fire','QQ Speed', 'Kingdom of Locke'], movies: ['Hello Li Huanying', 'Youth School', 'that year in a hurry'], foods: ['Shaoyang Rice Noodle', 'Changsha Tea Yan', 'Chongqing Hot Pot']}

Effect display

Explanation:

We can put multiple slot in the component, but when we have more than one, we have to name them, and specify them in the parent component, so that we don't miss it.

III. Scope slot

The scope slot is slightly different from the previous, where the data is in the parent component, while the scope slot is the data in the child component, which in turn is passed to the parent component, allowing the parent component to define the structure for rendering.

Modified subcomponents

If the parent component does not pass a value, this default will be displayed. If the parent component does not pass a value, the default export default {data () {return {foods: ['Shaoyang rice noodle', 'Changsha tea color', 'Chongqing hot pot']} will be displayed.

Parent component

Foods {{item}} Foods {{item}} Foods {{item}} {{listData}} import Category from'. / components/Category.vue' export default {name: 'App' Components: {Category}}

Effect picture

In the process of study and practice, I didn't think of any use scenarios, but there are cases on the official website. I think there must be a reason for it to exist, but I have too little knowledge to make use of it.

Explanation:

In the child component, the value is passed to the parent component through the variable name = defined data, and the parent component receives it because it is still needed. First floor, just arrived.

{{item}} above are all the contents of the article "what are the Vue slots for solving parent-child component communication". 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.