vue-template-compiler 解析 HTML 模板的边界问题

[cfour-hi]

Version

15.7.0

Reproduction link

https://codepen.io/Monine/pen/rELQZW

Steps to reproduce

视图会输出 render 属性值，打开开发者工具查看 console 面板也可以查看编译结果。

What is expected?

render 属性的值应该为：

"with(this){return _c('CustomerComp',{scopedSlots:_u([_l((['a']),function(name){return {key:name,fn:function(){return undefined},proxy:true}}),_l((['b']),function(name){return {key:name,fn:function(){return undefined},proxy:true}})],null,true)})}"

格式化后：

with (this) {
  return _c('CustomerComp', {
    scopedSlots: _u(
      [
        _l(['a'], function(name) {
          return {
            key: name,
            fn: function() {
              return undefined;
            },
            proxy: true,
          };
        }),
        _l(['b'], function(name) {
          return {
            key: name,
            fn: function() {
              return undefined;
            },
            proxy: true,
          };
        }),
      ],
      null,
      true,
    ),
  });
}

What is actually happening?

render 属性的值为：

"with(this){return _c('CustomerComp',{scopedSlots:_u([_l((['b']),function(name){return {key:name,fn:function(){return undefined},proxy:true}})],null,true)})}"

格式化后：

with (this) {
  return _c('CustomerComp', {
    scopedSlots: _u(
      [
        _l(['b'], function(name) {
          return {
            key: name,
            fn: function() {
              return undefined;
            },
            proxy: true,
          };
        }),
      ],
      null,
      true,
    ),
  });
}

---

已经找到问题原因，在 vue-template-compiler build.js L2470-L2471，动态具名插槽名称 相同的情况下后者会替换前者。

此处我认为应该针对 动态具名插槽名称 进行判断，如果相同，则向名称添加额外唯一标识，防止被后者替换前者的情况出现。

[cfour-hi]

这个 issue 是不是应该提到 vue 仓库？

[awefeng]

hello，我认为这个是完全没有必要的。以下是我的理由：
根据VUE的规范来说，插槽名称就已经是这个插槽的标识了。
具名插槽，并且还特意指出只能有一个default。name的设计就是为了让vue能够区分出coder具体想将内容插入到哪个slot上，如果名称相同再额外添加标识，基本上是没有什么意义的。

[cfour-hi]

@awefeng
不一样，具名插槽使用 常量 作为唯一标识没有问题，我们使用时要遵守唯一性规则。
而我这里提出的是 动态插槽名 是 变量 的情况下，也就是 “动态具名插槽”。
在我这个例子中，变量名虽然是一样的，但变量在运行时的值其实是不一样（唯一）的，只是预编译解析模板时没办法获取到运行时的上下文环境，不知道这个变量最终的值是什么而已。
我认为 动态具名插槽 的变量名称是可以相同的，因为在运行时如法发现变量的值是一样的，后者自然会覆盖前者。这一步放到预编译来做，除了性能运行时能有所提升，我暂时没想到其它溢出。

[cfour-hi]

我有 工作日志 记录了这个问题的定位过程

[posva]

hey @Justineo , could we translate this issue and label it? Maybe someone is up to take it

[cfour-hi]

@posva
I know how to solve this problem, maybe I can submit PR.

[awefeng]

@Monine Sorry开始没看明白，后面看了你的demo，确实是应该渲染出两个才对。

[zrh122]

主要是因为用了 v-for，把代码改成下面这样就不会有这个问题了：

<template
  v-for="name of ['a']"
  #[name]
/>

<template
  v-for="name1 of ['b']"
  #[name1]
/>

[cfour-hi]

@zrh122
目前在项目中，我也是这样绕开这个问题的。

[zrh122]

@Monine, @posva i add an english version(#10271) for it.

[posva]

Thank you so much! Closing in favor of the English version