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

Editor to share with you the example analysis of slot content distribution in vue, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The content distribution of vue is very suitable for the scenario of "fixed part + dynamic part". The fixed part can be structurally fixed or logically fixed, for example, the drop-down loading, the drop-down loading is only the middle content is dynamic, and pulling to the bottom will trigger the operation of pulling more content, so we can turn the drop-down loading into a plug-in with slot.

Single Slot

Putting Dom,Vue in the children tag will not listen to you, that is, it will not be displayed, similar to React:this.props.children.

/ / parent 12345 components / this will not show / / Child components: {children: {template: "in order to clarify the scope, use the button tag"}}

You need to write like this.

Children: {template: "to clarify the scope of action, use the button tag"}

Note that the slot here is equivalent to a pit, waiting for the parent component to fill in. The slot here represents the span above.

Multiple Slot

The name attribute needs to be added here. To put it bluntly, unlike the single Slot above, there needs to be a corresponding relationship.

Parent-> slot= "name1"

Sub-> import Toast from 'lib/xl-toast'import Tool from' tool/tool'export default {data () {return {page: 1, isLoading: false, busy: false, isFirstLoad: false}}, props: {pageSize: {default: 10 / / number of data displayed per page}, total: {default: 0 / / Total number of records}} Computed: {totalPage () {return Math.ceil (this.total / this.pageSize)}}, created () {this.getList ()}, mounted () {this.addScrollListener ()}, methods: {addScrollListener () {/ / add listening scrolling operation Use function anti-shake this.scrollFn = Tool.throttle (this.onScroll, 30,30) document.addEventListener ('scroll', this.scrollFn, false)}, getList () {/ / pulling data or no data Cancel scrolling listening if (this.isLoading | | this.isFirstLoad & & (this.page > this.totalPage)) {document.removeEventListener ('scroll', this.scrollFn, false) return} this.busy = true this.isLoading = true / / notify the parent component to pull more data this.$emit ("getList", this.page, () = > {this.isFirstLoad = true this.isLoading = false this.page++}) () = > {Toast.show ('network error Please try again later') this.total = 0 this.isLoading = false}), reset () {/ / re-pull data this.page = 1 this.total = 0 this.isLoading = false this.isFirstLoad = false this.addScrollListener () this.getList ()}, onScroll () {/ / pull more data if (Tool.touchBottom ()) {this.getList ()}

In short, when we encounter some parts that want to be relatively fixed, including js operations or structures, as well as some dynamic parts, we should consider using: component + slot.

Unintended alternative use of slot

When I was doing the requirement, I made a component, which is divided into two parts, which are highly coupled (otherwise, how can I think of it as a component), as shown in the following figure:

Area C was originally a component, and then the product suddenly said that it was necessary to separate the two parts, move A to C1 and C1 to A (feeling aggrieved).

My first idea here is to take it apart to make two components, but the problem is that the previous two parts are highly coupled, and if you force it to be split into two components, then there must be a lot more interaction between the two components. For example, if C1 changes something and affects C2, C1 needs to trigger an event to notify the parent component, which then calls a method of C2 to update the state. This kind of cross-component communication will be a nightmare in the case of frequent interaction between components, but I need frequent interaction, so if it is divided into two components, then the workload and complexity will be greatly increased. Of course, you can think of Event Hub to achieve the interaction between the two components, but the fundamental problem has not been substantially solved.

So, is there any way to move places without splitting into two components? the answer is slot. Take my example as an example, distribute An and B as the content of C, it turns out to be like this:

After changing to slot, it will be like this.

In this way, we can not split the C module, but also adjust the location, and complete the requirements with the minimum cost.

The above is all the content of the article "sample Analysis of slot content Distribution in vue". 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.