Merge pull request #1088 from songlairui/dynamic-slot-name

Dynamic slot name

Author: anchengjian

packages/mpvue-template-compiler/build.js

@@ -4567,9 +4567,27 @@ function getSlotsName (obj) {
   if (!obj) {
     return ''
   }
-  return Object.keys(obj).map(function (k) {
-    return ("$slot" + k + ":'" + (obj[k]) + "'")
-  }).join(',')
+  // wxml模板中 data="{{ a:{a1:'string2'}, b:'string'}}" 键a不能放在最后，会出错
+  return tmplateSlotsObj(obj)
+    .concat(
+      Object.keys(obj).map(function(k) {
+        return '$slot' + k + ":'" + obj[k] + "'"
+      })
+    )
+    .join(',')
+}
+
+function tmplateSlotsObj(obj) {
+  if (!obj) {
+    return []
+  }
+  // wxml模板中 data="{{ a:{a1:'string2'}, b:'string'}}" 键a1不能写成 'a1' 带引号的形式，会出错
+  var $for = Object.keys(obj)
+    .map(function(k) {
+      return (k + ":'" + (obj[k]) + "'")
+    })
+    .join(',');
+  return $for ? [("$for:{" + $for + "}")] : []
 }
 
 var component = {
@@ -4585,7 +4603,13 @@ var component = {
     var slots = ast.slots;
     if (slotName) {
       attrsMap['data'] = "{{...$root[$k], $root}}";
-      attrsMap['is'] = "{{" + slotName + "}}";
+      // bindedName is available when rendering slot in v-for
+      var bindedName = attrsMap['v-bind:name'];
+      if(bindedName) {
+        attrsMap['is'] = "{{$for[" + bindedName + "]}}";
+      } else {
+        attrsMap['is'] = "{{" + slotName + "}}";
+      }
     } else {
       var slotsName = getSlotsName(slots);
       var restSlotsName = slotsName ? (", " + slotsName) : '';

packages/mpvue/index.js

@@ -4148,7 +4148,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.12';
+Vue$3.mpvueVersion = '1.0.13';
 
 /* globals renderer */
 

src/platforms/mp/compiler/codegen/convert/component.js

@@ -2,9 +2,27 @@ function getSlotsName (obj) {
   if (!obj) {
     return ''
   }
-  return Object.keys(obj).map(k => {
-    return `$slot${k}:'${obj[k]}'`
-  }).join(',')
+  // wxml模板中 data="{{ a:{a1:'string2'}, b:'string'}}" 键a不能放在最后，会出错
+  return tmplateSlotsObj(obj)
+    .concat(
+      Object.keys(obj).map(function(k) {
+        return '$slot' + k + ":'" + obj[k] + "'"
+      })
+    )
+    .join(',')
+}
+
+function tmplateSlotsObj(obj) {
+  if (!obj) {
+    return []
+  }
+  // wxml模板中 data="{{ a:{a1:'string2'}, b:'string'}}" 键a1不能写成 'a1' 带引号的形式，会出错
+  const $for = Object.keys(obj)
+    .map(function(k) {
+      return `${k}:'${obj[k]}'`
+    })
+    .join(',')
+  return $for ? [`$for:{${$for}}`] : []
 }
 
 export default {
@@ -14,8 +32,14 @@ export default {
   convertComponent (ast, components, slotName) {
     const { attrsMap, tag, mpcomid, slots } = ast
     if (slotName) {
-      attrsMap['data'] = `{{...$root[$k], $root}}`
-      attrsMap['is'] = `{{${slotName}}}`
+      attrsMap['data'] = "{{...$root[$k], $root}}"
+      // bindedName is available when rendering slot in v-for
+      const bindedName = attrsMap['v-bind:name']
+      if(bindedName) {
+        attrsMap['is'] = "{{$for[" + bindedName + "]}}"
+      } else {
+        attrsMap['is'] = "{{" + slotName + "}}"
+      }
     } else {
       const slotsName = getSlotsName(slots)
       const restSlotsName = slotsName ? `, ${slotsName}` : ''

test/mp/compiler/index.spec.js

@@ -553,10 +553,20 @@ describe('slot', () => {
     )
   })
 
+  it('含`:name`的插槽组件', () => {
+    assertCodegen(
+      `<div><slot :name="tab.key">test</slot></div>`,
+      `<template name="a"><view class="_div"><template name="default">test</template><template data="{{...$root[$k], $root}}" is="{{$for[tab.key]}}"></template></view></template>`,
+      {
+        name: 'a'
+      }
+    )
+  })
+
   it('slot name', () => {
     assertCodegen(
       `<card class="baz boo"><a slot="header">test</a></card>`,
-      `<import src="/components/card" /><template name="a"><template data="{{...$root[$kk+'0'], $root, $slotdefault:'hashValue-default-0',$slotheader:'hashValue-header-0'}}" is="card"></template></template>`,
+      `<import src="/components/card" /><template name="a"><template data="{{...$root[$kk+'0'], $root, $for:{default:'hashValue-default-0',header:'hashValue-header-0'},$slotdefault:'hashValue-default-0',$slotheader:'hashValue-header-0'}}" is="card"></template></template>`,
       {
         name: 'a',
         components: {
@@ -579,7 +589,7 @@ describe('slot', () => {
   it('slot template', () => {
     assertCodegen(
       `<card class="baz boo"><template slot="header">test</template></card>`,
-      `<import src="/components/card" /><template name="a"><template data="{{...$root[$kk+'1'], $root, $slotdefault:'hashValue-default-1',$slotheader:'hashValue-header-1'}}" is="card"></template></template>`,
+      `<import src="/components/card" /><template name="a"><template data="{{...$root[$kk+'1'], $root, $for:{default:'hashValue-default-1',header:'hashValue-header-1'},$slotdefault:'hashValue-default-1',$slotheader:'hashValue-header-1'}}" is="card"></template></template>`,
       {
         name: 'a',
         components: {
@@ -619,6 +629,7 @@ describe('slot', () => {
     )
   })
 })
+
 describe('web-view', () => {
   it('web-view', () => {
     assertCodegen(