fix($core): content slots doesn't work

vuejs · Oct 22, 2018 · 704031f · 704031f
1 parent cfd0113
commit 704031f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/packages/@vuepress/core/lib/app/app.js b/packages/@vuepress/core/lib/app/app.js
@@ -11,6 +11,7 @@ import Store from './Store'
 
 // built-in components
 import Content from './components/Content'
+import ContentSlotsDistributor from './components/ContentSlotsDistributor'
 import OutboundLink from './components/OutboundLink.vue'
 import ClientOnly from './components/ClientOnly'
 
@@ -36,6 +37,7 @@ Vue.use(Router)
 Vue.mixin(dataMixin(ClientComputedMixin, siteData))
 // component for rendering markdown content and setting title etc.
 Vue.component('Content', Content)
+Vue.component('ContentSlotsDistributor', ContentSlotsDistributor)
 Vue.component('OutboundLink', OutboundLink)
 // component for client-only content
 Vue.component('ClientOnly', ClientOnly)

diff --git a/packages/@vuepress/core/lib/app/components/Content.js b/packages/@vuepress/core/lib/app/components/Content.js
@@ -22,7 +22,9 @@ export default {
       return h(pageKey, {
         class: [data.class, data.staticClass],
         style: data.style,
-        slot: props.slot || 'default'
+        props: {
+          slotKey: props.slot || 'default'
+        }
       })
     }
     return h('')

diff --git a/packages/@vuepress/core/lib/app/components/ContentSlotsDistributor.js b/packages/@vuepress/core/lib/app/components/ContentSlotsDistributor.js
@@ -0,0 +1,19 @@
+export default {
+  functional: true,
+  props: {
+    slotKey: String,
+    required: true
+  },
+  render (h, { props, slots }) {
+    console.log(props.slotKey)
+    return h('div',
+      {
+        class: [
+          'content',
+          props.slotKey
+        ]
+      },
+      slots()[props.slotKey]
+    )
+  }
+}
diff --git a/packages/@vuepress/markdown-loader/index.js b/packages/@vuepress/markdown-loader/index.js
@@ -100,8 +100,9 @@ module.exports = function (src) {
 
   const res = (
     `<template>\n` +
-      `<div class="content">${html}</div>\n` +
+      `<ContentSlotsDistributor :slot-key="slotKey">${html}</ContentSlotsDistributor>\n` +
     `</template>\n` +
+    `<script>export default { props: ['slot-key'] }</script>` +
     (hoistedTags || []).join('\n') +
     `\n${dataBlockString}\n`
   )