Detaillierte Erläuterung der Verwendung von Slots/Scopes in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von Slots/Scopes in Vue geben sehen.

Das Folgende ist ein Beispiel, um das Funktionsprinzip von Slots kurz zu erklärenDie Vorlage der dx-li-Unterkomponente lautet wie folgt:

<li class="dx-li">
 <slot>
   你好！
 </slot>
</li>
dx-ul父组件的template如下：
<ul>
 <dx-li>
  hello juejin!
 </dx-li>
</ul>
结合上述例子以及vue中相关源码进行分析
dx-ul父组件中template编译后，生成的组件render函数：
module.exports={
 render:function (){
  var _vm=this;
  var _h=_vm.$createElement;
  var _c=_vm._self._c||_h;
  // 其中_vm.v为createTextVNode创建文本VNode的函数
  return _c('ul', 
    [_c('dx-li', [_vm._v("hello juejin!")])],
    1)
 },
 staticRenderFns: []
}

Der übergebene Slot-Inhalt „Hallo juejin!“ wird in einen untergeordneten Knoten des dx-li-Unterkomponenten-VNode-Knotens kompiliert.

Rendern Sie die dx-li-Unterkomponente, wobei die Renderfunktion der Unterkomponente lautet:

module.exports={
 render:function (){
  var _vm=this;
  var _h=_vm.$createElement;
  var _c=_vm._self._c||_h;
  // 其中_vm._v 函数为renderSlot函数
  return _c('li', 
    {staticClass: "dx-li" }, 
    [_vm._t("default", [_vm._v("你好 掘金！")])], 
    2
   )
  },
 staticRenderFns: []
}

Während der Initialisierung der dx-li-Unterkomponenten-Vue-Instanz wird die Funktion initRender aufgerufen:

function initRender (vm) {
 ...
 // 其中_renderChildren数组，存储为 'hello juejin!'的VNode节点；renderContext一般为父组件Vue实例
 这里为dx-ul组件实例
 vm.$slots = resolveSlots(options._renderChildren, renderContext);
 ...
}

Die „resolveSlots“-Funktion lautet:

/**
 * 主要作用是将children VNodes转化成一个slots对象.
 */
export function resolveSlots (
 children: ?Array<VNode>,
 context: ?Component
): { [key: string]: Array<VNode> } {
 const slots = {}
 // 判断是否有children，即是否有插槽VNode
 if (!children) {
 return slots
 }
 // 遍历父组件节点的孩子节点
 for (let i = 0, l = children.length; i < l; i++) {
 const child = children[i]
 // data为VNodeData，保存父组件传递到子组件的props以及attrs等
 const data = child.data
 /* 移除slot属性
 * <span slot="abc"></span> 
 * 编译成span的VNode节点data = {attrs:{slot: "abc"}, slot: "abc"},所以这里删除该节点attrs的slot
 */
 if (data && data.attrs && data.attrs.slot) {
  delete data.attrs.slot
 }
 /* 判断是否为具名插槽，如果为具名插槽，还需要子组件/函数子组件渲染上下文一致。主要作用：
 *当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字。
 * 举个栗子：
 * child组件template: 
 * <p>
 * <p class="default"><slot></slot></p>
 * <p class="named"><slot name="foo"></slot></p>
 * </p>
 * parent组件template:
 * <child><slot name="foo"></slot></child>
 * main组件template:
 * <parent><span slot="foo">foo</span></parent>
 * 此时main渲染的结果：
 * <p>
 * <p class="default"><span slot="foo">foo</span></p>
   <p class="named"></p>
 * </p>
 */
 if ((child.context === context || child.fnContext === context) &&
  data && data.slot != null
 ) {
  const name = data.slot
  const slot = (slots[name] || (slots[name] = []))
  // 这里处理父组件采用template形式的插槽
  if (child.tag === 'template') {
  slot.push.apply(slot, child.children || [])
  } else {
  slot.push(child)
  }
 } else {
  // 返回匿名default插槽VNode数组
  (slots.default || (slots.default = [])).push(child)
 }
 }
 // 忽略仅仅包含whitespace的插槽
 for (const name in slots) {
 if (slots[name].every(isWhitespace)) {
  delete slots[name]
 }
 }
 return slots
}

Wenn die dx-li-Komponente gemountet wird, wird die Renderfunktion der dx-li-Komponente aufgerufen. Dabei wird die renderSlot-Funktion aufgerufen:

export function renderSlot (
  name: string, // 子组件中slot的name，匿名default
  fallback: ?Array<VNode>, // 子组件插槽中默认内容VNode数组，如果没有插槽内容，则显示该内容
  props: ?Object, // 子组件传递到插槽的props
  bindObject: ?Object // 针对<slot v-bind="obj"></slot> obj必须是一个对象
 ): ?Array<VNode> {
 // 判断父组件是否传递作用域插槽
  const scopedSlotFn = this.$scopedSlots[name]
  let nodes
  if (scopedSlotFn) { // scoped slot
  props = props || {}
  if (bindObject) {
   if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {
   warn(
    'slot v-bind without argument expects an Object',
    this
   )
   }
   props = extend(extend({}, bindObject), props)
  }
  // 传入props生成相应的VNode
  nodes = scopedSlotFn(props) || fallback
  } else {
  // 如果父组件没有传递作用域插槽
  const slotNodes = this.$slots[name]
  // warn duplicate slot usage
  if (slotNodes) {
   if (process.env.NODE_ENV !== 'production' && slotNodes._rendered) {
   warn(
    `Duplicate presence of slot "${name}" found in the same render tree ` +
    `- this will likely cause render errors.`,
    this
   )
   }
   // 设置父组件传递插槽的VNode._rendered，用于后面判断是否有重名slot
   slotNodes._rendered = true
  }
  // 如果没有传入插槽，则为默认插槽内容VNode
  nodes = slotNodes || fallback
  }
  // 如果还需要向子组件的子组件传递slot
  /*举个栗子：
  * Bar组件: <p class="bar"><slot name="foo"/></p>
  * Foo组件：<p class="foo"><bar><slot slot="foo"/></bar></p>
  * main组件：<p><foo>hello</foo></p>
  * 最终渲染：<p class="foo"><p class="bar">hello</p></p>
  */
  const target = props && props.slot
  if (target) {
  return this.$createElement('template', { slot: target }, nodes)
  } else {
  return nodes
  }
 }

Scoped Slots-Verständnis

dx-li-Unterkomponente lautet wie folgt:

<li class="dx-li"> 
 <slot str="你好 掘金！">
  hello juejin!
 </slot>
</li>
dx-ul父组件的template如下：
<ul>
 <dx-li>
  <span slot-scope="scope">
   {{scope.str}}
  </span>
 </dx-li>
</ul>
结合例子和Vue源码简单作用域插槽
dx-ul父组件中template编译后，产生组件render函数：
module.exports={
 render:function (){
  var _vm=this;
  var _h=_vm.$createElement;
  var _c=_vm._self._c||_h;
   return _c('ul', [_c('dx-li', {
   // 可以编译生成一个对象数组
   scopedSlots: _vm._u([{
    key: "default",
    fn: function(scope) {
    return _c('span', 
     {},
     [_vm._v(_vm._s(scope.str))]
    )
    }
   }])
   })], 1)
  },
 staticRenderFns: []
 }

wobei _vm._u Funktion:

function resolveScopedSlots (
 fns, // 为一个对象数组，见上文scopedSlots
 res
) {
 res = res || {};
 for (var i = 0; i < fns.length; i++) {
  if (Array.isArray(fns[i])) {
   // 递归调用
   resolveScopedSlots(fns[i], res);
  } else {
   res[fns[i].key] = fns[i].fn;
  }
 }
 return res
}

Das anschließende Rendern Der Prozess der Unterkomponente ähnelt dem von Slots. Das Prinzip von Bereichsslots ist grundsätzlich dasselbe wie das von Slots. Der Unterschied besteht darin, dass beim Kompilieren der übergeordneten Komponentenvorlage eine Funktion generiert wird, die einen VNode zurückgibt. Wenn die untergeordnete Komponente mit der von der übergeordneten Komponente übergebenen Bereichssteckplatzfunktion übereinstimmt, wird die Funktion aufgerufen, um den entsprechenden VNode zu generieren.

Zusammenfassung

Tatsächlich ist das Prinzip von Slots/Slots mit Gültigkeitsbereich sehr einfach. Wir müssen nur verstehen, dass Vue Komponenten rendert. Es basiert auf den tatsächlichen DOM-Elementen von VNode Renders.

Slots sind Slot-VNodes, die durch Kompilieren von übergeordneten Komponenten generiert werden. Beim Rendern von Unterkomponenten werden diese im entsprechenden Unterkomponenten-Rendering-VNode-Baum platziert.

Scoped Slots kompilieren den Slot-Inhalt in der übergeordneten Komponente in eine Funktion. Übergeben Sie beim Rendern der Unterkomponente die Requisiten der Unterkomponente und generieren Sie den entsprechenden VNode. Schließlich gibt die Unterkomponente den VNode-Knotenbaum gemäß der Renderfunktion der Komponente zurück und aktualisiert, um die echten DOM-Elemente zu rendern. Gleichzeitig ist ersichtlich, dass auch die Übergabe von Slots über Komponenten hinweg möglich ist, allerdings muss darauf geachtet werden, dass benannte Slots übergeben werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So teilen Sie den Seitencode auf und laden ihn bei Bedarf

Detaillierte Erklärung der Verwendung von Steckplatzsockel in der Vue-Komponente

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Slots/Scopes in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!