Slot v-slot socket element
First, when the browser parses it as a label to resolve, only encountered do not know the matter, and skip when you find is a component, a component in the analytical form.
The benefits of using slots?
For example, a top distribution sites are the same, if you use components, to write a few navigation components. I just wrote a navigation component, and then let things go to overwrite the contents of the interpolation inside it.
* In page rendering time, slot elements will be replaced with the component tag inside. Then this slot is ha ha ha.
* Not only can write content directly, you can also set labels. You can also write other components.
1. Scope compiled under whose template data element tag is who.
<P> {{name}} </ p> In its template instance, it is John Doe
Subcomponents: parent component:
2. The default content component tag, if not the content, content in the component template <slot> </ slot> is the default content, if you write the content on the component tag, not to render content inside the slot
<myhead> </ myhead> <slot> ha ha ha ha I'm handsome </ slot> default content
3. Named Slot
1. Why is it called anonymous slot, it is to explain there are many slot, each slot has its own name.
2. slot element has a special characteristic: name. This feature can be used to define additional slots
4. scope slots: slot (slots) component in the template, using the current data is data, the tag assembly component called the parent template assembly, using data which is the parent component.
1. Sometimes the slots so that the content can be accessed inside the sub-components in the data is very useful.
2. 在组件标签中 我想使用子组件的 name 但这个name是实例对象的父组件的，因为组件标签在实例对象模板中。
3。 为了让 user 在父级的插槽使用，我们将 user 作为<slot>插槽元素的一个特性绑定上去。
4. 我们可以给 v-slot 带一个值，来定义我们提供的插槽 prop。
需求：组件标签（父组件）使用自己（子组件）组件中的数据？
1. 将子组件的数据绑定到插槽标签 <slot>上
绑定在 slot 的 u 都存在插槽里的叫 prop 对象，要用 v-slot=“yh” 定义一个 prop对象，这个，yh就是定义 prop对象，而这个对象上存的就是子组件的数据。
绑定在 slot 上的属性，会形成一个 prop对象，用 v-slot 来定义这个prop对象。
2. 在组件标签上用 v-slot = “users” users 就是这个 prop对象了。
{{ users.u }} 就是 user 对应的 “张三” 数据
插槽注意点：
* 可以打乱顺序，给名字对应上就可以
* 组件标签里面的 v-slot:xx，后面绑定的名称要和模板里的对应。
* 如果不写 v-slot就不出
作者：晋飞翔
手机号(微信同步)：17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢！