以编程方式创建的 Vue 组件缺少在 Vue.prototype 上定义的全局属性

Question

我在创建从捆绑汇总库导入的 vue 组件实例时遇到问题，我使用 Vue.prototype 添加一个全局属性到根 Vue 实例，它在我的所有组件之间共享，但是，当我使用 Vue.extend 方法创建一个新实例时，新创建的组件具有 none 个原型属性或全局变量，它们都只是 return 未定义。



//Main.js
Vue.prototype.$example = 'Hello there!';

//////////////////////////////

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')


//App.vue
import { MyDynamicComponent } from 'my-bundled-rollup-library';
export default {
    created() {

        var DynamicComponent = Vue.extend(MyDynamicComponent);

        console.log(this.$example) //Returns 'Hello there!' (correct)
        var instance = new DynamicComponent({
            propsData: {
                hello:'world',
            },
        })

        ///////////////////////////////////////////

        console.log(instance.$example) //Returns undefined (does not have the property)
    }
}

这是捆绑前的组件示例

//MyDynamicComponent.vue
const MyDynamicComponent = {
     props:{
          hello:{
               type:String
          }
     },
     created() {
          console.log(this.$example) //undefined
     }
}

export default component
export { MyDynamicComponent as MyDynamicComponent }

我的第一个想法是组件使用的 Vue 实例与 Vue.extend

不同

Answer 1

我重新创建了整个应用程序，它对我有用。我使用 rollup 编译组件并将其导入到使用 vue CLI 生成的应用程序中。

唯一让我疑惑的是你为什么不默认导入组件？

import { MyDynamicComponent } from 'my-bundled-rollup-library';
// to
import MyDynamicComponent from 'my-bundled-rollup-library';

您将其导出为默认值，因此您必须将其导入为默认值。

Info This is the part inside vue which creates the new "sub" prototype object with the "super" prototype https://github.com/vuejs/vue/blob/dev/src/core/global-api/extend.js#L36

rollup.config.js

import vue from 'rollup-plugin-vue'

export default {
  input: 'component.vue',
  output: {
    format: 'esm',
    file: 'dist/MyComponent.js'
  },
  plugins: [
    vue()
  ]
}

dist/MyComponent.js

这是从 MyComponent.vue

生成的文件

import { openBlock, createBlock } from 'vue';

//
//
//

var script = {
  props: {
    hello: {
      type: String,
    },
  },
  created() {
    console.warn('MY_COMPONENT', this.$example); // should work
  },
};

function render(_ctx, _cache) {
  return (openBlock(), createBlock("div", null, "hoi"))
}

script.render = render;
script.__file = "component.vue";

export default script;

App.vue（脚本标签）

import Vue from 'vue';
import MyComponent from './dist/MyComponent'; // throws some warnings, but this is not relevant for this post

export default {
  name: 'App',
  created() {
    const DynamicComponent = Vue.extend(MyComponent);

    const instance = new DynamicComponent({
      propsData: {
        hello: 'world',
      },
    });

    console.log('instance', instance.$example);
  },
};

Answer 2

在 rm -rf node_modules 并重新安装并再次尝试使用 rollup 重新编译我的库之后，rollup 抛出了一个错误，它在使用 Vue 运行时+编译器包的别名之前没有抛出。

[!] Error: Cannot find module 'vue/dist/vue.esm.js'

我的 rollup.config 文件有


import vue from 'rollup-plugin-vue';

import alias from '@rollup/plugin-alias';

export default {
    plugins: {
        alias({
            entries: [
                //Removing this line fixed the problem
                //{ find: 'vue', replacement: require.resolve('vue/dist/vue.esm.js') },
            ],
        }),
        vue,
    }
}

所以吸取的教训是，当事情变得奇怪时，rm -rf node_modules 并重新重建一切。

以编程方式创建的 Vue 组件缺少在 Vue.prototype 上定义的全局属性

Programmatically created Vue component missing global properties defined on Vue.prototype

javascript

vue.js

vuejs2

rollup