老师你好,关于slot的child的问题

来源:9-12 slot(5)

牛Plus

2020-03-02

在创建Applayout的vnode的时候

    <div>
        <AppLayout>
            <template v-slot:header>
                <h1>{{title}}</h1>
            </template>
            {{msg}}
            <template v-slot:footer>
                {{desc}}
            </template>
        </AppLayout>
    </div>`

Applayout在生成vnode的时候调用createElement方法

 function createElement(
      context,
      tag,
      data,
      children,
      normalizationType,
      alwaysNormalize
  ) {
      debugger
      if (Array.isArray(data) || isPrimitive(data)) {
          normalizationType = children;
          children = data;
          data = undefined;
      }
      if (isTrue(alwaysNormalize)) {
          normalizationType = ALWAYS_NORMALIZE;
      }
      return _createElement(context, tag, data, children, normalizationType)
  }

这个children传进来就是vnode了 这个vnode是在什么时候创建的?我在上面的代码中打了一个debugger,第一次走进来就是创建Applayout,并没有发现创建children的vnode,所以children的vnode是在什么时候创建的啊

写回答

1回答

ustbhuangyi

2020-03-03

模板会解析成 render 函数,会调用 createElement 方法创建 vnode,从函数的执行顺序来看,应该是先执行子节点对应的 createElement 方法创建 vnode。我建议你再好好调试一下,如果还有问题把例子发到 GItHub 上我抽空帮你看下

0
1
牛Plus
我知道原因了 因为我是直接写的{{msg}} 是一个文本节点,文本节点创建vnode没有走createElement,走的是/core/vdom/vnode.js 里面的createTextVNode 方法创建的。如果我包一层标签 就会走到这里。 感谢老师
2020-03-03
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程