import动态引入文件

• install.vue

<template>
  <article class="markdown-body" v-html="md">
  </article>
</template>

<script>
import md from '../markdown/install.md';
export default {
  data() {
    return {
      md
    }
  }
}
</script>

• intro.vue

<template>
  <article class="markdown-body" v-html="md">
  </article>
</template>

<script>
import md from '../markdown/intro.md';
export default {
  data() {
    return {
      md
    }
  }
}
</script>

上面两个组件除了import后面的路径不同外其他都相同，所以我们可以把它封装成一个组件
问题1：我们封装的组件只能从props里接受参数，但是import是在props之前执行的
解决方法：把import移到setup里

• Markdown.vue

<template>
  <article class="markdown-body" v-html="md">
  </article>
</template>

<script>
export default {
 props: {
    path: {
      type: String,
      required: true
    }
  },
  setup(props) {
    import md from props.path
  }
}
</script>

问题2：我们在setup里写import md from props.path这种写法会自动的移到export default的外面，所以还是会先执行
解决方法：使用动态import的写法

setup(props) {
    import (props.path)
 }

问题3：import(props.path)这种写法是异步的，我们想拿到它的返会值的话需要用await但是setup不支持写async
解决方法：先声明一个ref为null通过then拿到import返回的结果来设置content的值

setup(props) {
    const content = ref<string>(null)
    import(props.path).then(result => {
      content.value = result.default
    })
    return {content}
  }

使用

• demo.vue

<template>
  <markdown path="../markdown/get-started.md">    
  </markdown>
</template>
<script lang="ts">
import Markdown form './component/Markdown.vue
export default {
  components: { Markdown }
}
</script>

• Markdown.vue

<template>
  <article class="markdown-body" v-html="content">
  </article>
</template>

<script lang="ts">
import {ref} from 'vue'
export default {
  props: {
    path: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const content = ref<string>(null)
    import(props.path).then(result => {
      content.value = result.default
    })
    return {content}
  }
}
</script>