First talk about vue components
What are the components?
In my understanding, the contents of all the pages are vue components.
What are the components of his son?
Because all components are page content, so how to distinguish between father and son assemblies it? Actually very simple, there is now a page in the assembly of components inside js sub-assemblies are created, of course, including the introduction of an external component is called a subcomponent.
In the written component of the current page is called the parent component.
What is a slot?
Slot is used to distribute the task (or a distribution of content), it will be appreciated that the subassembly which is used in the placeholder, then the slot is provided for display to the content through the parent component. The location is the location of the display sub-assembly slot. (If you do not understand it does not matter, then there will be examples to illustrate)
When the simple understanding of these contents can start the actual operation.
Components in two ways:
One is an internal component, there is an external component.
Internal components are used only for the current page, with limitations, can not be a global multiplex.
External components is more flexible, and has a global, overall can reuse.
Let's first look at the creation and use of internal components:
effect:
Next is the creation and use of external components: first to a simple: create a public folder, used to put the components, then create a component (ie a vue file)
After you create the components in the page you want to use to register the component and the component is introduced:
Use components:
Renderings:
Then write one effect components:
Introduction and registration components: the tag name of the component can also be written like this, take a direct import component name as a label, the effect is the same
Next is to use:
· Renderings:
Hover to go up this component effect: and is expected to be the same, indicating that components such as the style is in effect.
Next is the component with a slot, said slot at the top is actually equivalent to occupy space in the sub-assembly components to the parent to set the contents of
That look at it in the end is kind of how.
The above steps and external components is the same.
Create subcomponents:
Composition is introduced and subassembly
Use subassembly with slots:
Renderings:
Hey, it seems there is no difference ah, of course, because I have not set content to slot Well, it should be how to set it? Actually very simple, tag content in this sub-component is set inside the slot will display content
So to see the effect of what is different:
no significant effect? Right, again comparing the effect of several
在子组件里面的插槽添加一个内容，这样再看效果
子组件的div里面的内容是在slot后面显示的，那就证实了slot 就是用来占位的了。当然它的作用可不仅仅是用来占位置，它的主要作用是用来分发任务（或者说是分发内容）
再看例：
效果图：
上面的是匿名插槽，如果我想指定内容到一个指定的插槽位置里面那应该怎么办呢？
为了解决这个问题，就有了具名插槽，具名插槽就是有名字的插槽的意思，有名字的话要指定内容就容易了。
看实例：创建一个具名插槽 在name属性的值就是插槽的名字
使用：注意，具名插槽使用的时候一定要把插槽名字写在最外面的标签，要保证插槽和子组件的 ying 标签保持父子关系，否则会被当成是匿名插槽来显示
效果：
上面两个插槽都不能进行数据传递，那么就有了区域插槽来解决这个问题
区域插槽（作用域插槽）：因为区域插槽可以用来处理父组件传递的数据，那么我们首先要做的是创建父级组件的数据
在父组件的data里面创建一个数组数据，（模仿后端传递的数据）
接下来我们要将这个数据传递给子组件
接下来我们再来设置子组件的区域插槽：
接下来看效果：
这样就能通过插槽来对父级组件的数据进行传递处理了。
好了，到这里相信你也会使用了。欢迎留言您的见解和指出错误，谢谢！