import动态引入文件

• install.vue

• intro.vue

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

• Markdown.vue

问题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(null)
    import(props.path).then(result => {
      content.value = result.default
    })
    return {content}
  }

使用

• demo.vue

• Markdown.vue