Question

我的老朋友。

我正在路由到一个vue文件，该文件在路由时异步导入（通过导入）。它的模板在下面，主要用于加载较厚的Web组件，并与该较厚的组件分离（称为mcclure-events）。

<template>
  <mcclure-events :userState="userState"></mcclure-events>
</template>

<script>
export default {
  name: 'mCclureEvents',
  components: {},
  props: {
    userState: Object
  },

  // Example of import statement used.
  mounted () {
    import(/* webpackIgnore: true */ './mcclure-events.min.js')

  },

  // Importing here did not help.
  beforeRouteEnter (to, from, next) {

  }
}
</script>

我通过绕过Webpack并与服务器通信来获取mcclure-events。

mcclure-events是一个单独的项目中的Web组件，该项目通过以下方式构建：

vue-cli-service build --target wc --name mcclure-events

我正在使用Vue 2.6.1

没有为

mcclure-events分配userState。

我试图...

在获取存根文件之前获取mcclure事件
在获取存根之后但在路由到
，并且在对存根进行路由和安装之后。

Answer 1

此代码看起来很奇怪。您正在导入文件，但未在任何地方分配文件，更重要的是，未注册组件。

通常，这是在vue中动态导入组件的方式：

export default{
    components: {
        'mcclure-events': () => import(/* webpackIgnore: true */ './mcclure-events.min.js')
    }
}

尝试一下，看看是否有帮助。

Vue-无法将道具传递给动态导入的Web组件

1 个答案: