So verwenden Sie Slots/Slots mit Gültigkeitsbereich in Vue

Dieses Mal zeige ich Ihnen, wie Sie Slots/Slots mit Gültigkeitsbereich in Vue verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Slots/Slots mit Gültigkeitsbereich in Vue?

Ich habe mich schon immer für Slot-Slots in Vue interessiert. Ich hoffe, dass es jedem helfen kann, Slot-Slots besser zu verstehen.

Das Folgende Erklären Sie anhand eines Beispiels kurz das Funktionsprinzip von Slots

Die 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:

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 des Prozesses der Initialisierung der Vue-Instanz der dx-li-Unterkomponente wird die Funktion initRender ausgeführt aufgerufen werden:

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

Die Funktion „resolveSlots“ 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 dabei die Renderfunktion der dx-li-Komponente aufgerufen , 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 versteht

Die Vorlage der 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
}

Unterkomponente Der anschließende Rendervorgang ähnelt 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.

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:

React implementiert die Datensynchronisierung von Mobiltelefonnummern

Wie konvertiert Babel die Syntax der ES6-Klasse?

Detaillierte Erläuterung der Verwendung des Vue-Filters

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Slots/Slots mit Gültigkeitsbereich in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!