Программно созданный компонент Vue, в котором отсутствуют глобальные свойства, определенные для Vue .prototype

Question

У меня есть проблема при создании экземпляра компонента vue, импортированного из объединенной библиотеки, я добавляю глобальное свойство к экземпляру root Vue, используя Vue .prototype, и он используется всеми из моих компонентов, однако, когда я создаю новый экземпляр, используя метод Vue .extend, у вновь созданного компонента нет ни одного из свойств прототипа или глобальных переменных, все они просто возвращают undefined.

//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

После rm -rf node_modules, переустановки и повторной компиляции моей библиотеки с накопительным пакетом, свертывание выдает ошибку, которую он не генерировал ранее, по псевдониму для использования пакета компилятора Vue runtime +.

[!] 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 и заново все перестраиваем.

Answer 2

Я воссоздал все приложение, и оно работает для меня. Я перенес компонент с накопительным пакетом и импортировал его в приложение, созданное с помощью vue CLI.

Единственное, что меня удивляет, это то, что вы не импортировали компонент по умолчанию?

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

Вы экспортируете его по умолчанию, поэтому вы должны импортировать его по умолчанию.

Информация Это часть внутри vue, которая создает новый объект "sub" прототипа с "super" прототипом 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;

Приложение. 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);
  },
};