Vue's official website - Slot Instructions
background
When writing business, met six tab-panel, the same UI style, only two buttons of different characters, so developers use the basic ui component, button copywriting slot by slot, written in the parent component.
Great God got me thinking can provide a way to slot two kinds of props and passed at the same time. Use props passed in default mode, but when using the slot, you can copy the props incoming covered.
Originally thought is difficult to see the official website of the manual, it is actually very simple to use backup slot content to solve this problem (explained in the first part).
Solve the problem, and the way the contents of the slot and looked, as always, the official website that I can not read, so I toss two hours, the use of the test over and over in this to be a record.
First part: two ways to provide props and slot, slot may cover props passed value
Prefix knowledge:
Needless to say feeling. . . At a glance
Parent component, there are props and slot
Subassembly:
As props test passed, when the content is no parent component, subassembly test from the parent element to the props, the display content as a backup; parent component when the content, content within the slot subassembly is parent components content.
Part II: Scope slot
The beginning of the Great God told me that when he learned of the scope of slots to understand a little bit about, I said very simply that he re-watched, her face pops.
In my simple understanding, a time tag with parent subassembly components, sub-assemblies get the data in the template. The data out of the slot transfer, called the scope of the slot.
Prefix knowledge:
Named slot is to identify what you want to parent in the parent component assembly to write the content in which the position of sub-assemblies. (Suddenly dispatches fart)
Scope slot named slot also involves a little bit.
[Slot] began scope
Vue official website of example instructions given:
default is the default slot vue
Own examples:
Ellipse: props
①: subassemblies named slots
②: sub-component data slot
③: a parent component lets get exports. It can also be understood that the data handle assembly ② package layer, allowing the parent to get the components
④: it refers todo! Not the oval! ! Nothing to do with oval! ! ! : That is named slots. Displays the contents of the parent component in this position, to be named in the todo slot (that is, ①) in
⑤: test. ③ After the parcel is a scope. You can see a {test}, is what this means. The official said the deconstruction slot props. {} It is the role of deconstruction. ⑤ If you replace the contents into a v-slot = "slotScope" print template parent component todo-list tag {{slotScope}}, is displayed
Look! Pack a layer test
Try again, replace the contents of ③ for aaa, show:
So, in order to code simple, we need the data directly to deconstruct it. Using {XXX} manner.
It can then directly by way point, the desired value displayed on the page
I want to say on these, in fact, there is a dynamic slot name, [...] to resolve the slot name you want to display. Somewhat similar obj [key] This
Toss two hours, one hour blogging, blogging Why bother ...... Shashi Hou brain a key export nice ...... ORZ