Explication détaillée de l'utilisation des slots/scoped dans Vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de slots/scoped dans Vue. Quelles sont les précautions lors de l'utilisation de slots/scoped dans Vue. Voici un cas pratique, jetons un coup d'oeil. .

Ce qui suit est un exemple pour expliquer brièvement le principe de fonctionnement des slots

Le modèle du sous-composant dx-li est le suivant :

<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: []
}

Le contenu du slot transmis 'hello juejin!' sera compilé dans un nœud enfant du nœud VNode du sous-composant dx-li.

Rendu le sous-composant dx-li, dans lequel la fonction de rendu du sous-composant :

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: []
}

Pendant le processus d'initialisation de l'instance vue du sous-composant dx-li, la fonction initRender va être appelé :

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

La fonction solveSlots est :

/**
 * 主要作用是将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
}

Ensuite, lorsque le composant dx-li est monté, la fonction de rendu du composant dx-li sera appelée dans le processus. , la fonction renderSlot sera appelée :

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 comprend

le modèle du sous-composant dx-li est le suivant :

<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: []
 }

où _vm._u fonction :

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
}

sous-composant Le processus de rendu ultérieur est similaire aux slots. Le principe des slots scoped est fondamentalement le même que celui des slots. La différence est que lors de la compilation du modèle de composant parent, une fonction qui renvoie un VNode sera générée. Lorsque le composant enfant correspond à la fonction scope slot transmise par le composant parent, la fonction est appelée pour générer le VNode correspondant.

Résumé

En fait, le principe des slots/slots scoped est très simple Il suffit de comprendre que lorsque vue restitue des composants, il est basé sur les éléments DOM réels de VNode Renders.

Les slots sont des VNodes de slot générés par la compilation des composants parents. Lors du rendu des sous-composants, ils sont placés dans l'arborescence des VNodes de rendu des sous-composants correspondant.

scoped slots compile le contenu du slot dans le composant parent dans une fonction lors du rendu du sous-composant, transmettez les accessoires du sous-composant et générez le VNode correspondant. Enfin, le sous-composant renvoie l'arborescence des nœuds VNode en fonction de la fonction de rendu du composant et se met à jour pour restituer les vrais éléments DOM. Dans le même temps, on peut voir que le passage d'emplacements entre composants est également possible, mais il faut veiller à transmettre les emplacements nommés.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment diviser le code de la page et le charger à la demande

Explication détaillée de l'utilisation de sockets de slot dans le composant vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!