Vue props не определен при динамической печати компонента

Question

Моя проблема заключается в динамическом создании тегов "galeriaimages". Vue работает нормально, но свойства всегда не определены

Спасибо за все.

main.js

import Vue from 'vue'
import Gi from './components/galeriaimages.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', function() {
    new Vue({vuetify, render: h => h(Gi) }).$mount('galeriaimages');
});

HTML

<galeriaimages p1="awesome" /> <!-- I create it dinamically-->

Компонент Vue

<script>

export default {
    props: ['p1'] ,
    data: function() {
        return {
        }
    },
    created: function() {
        alert(this.p1); //this is always undefined
    }
}

Спасибо @skirtle за ответ:-)

Я добавил эту строку в свой vue.config.js

runtimeCompiler: правда

... и все работает нормально

Answer 1

Бит, где ты пишешь h(Gi) создает galeriaimages компонент, но не передавая ему никаких свойств.

Чтобы передать опору, вам нужно написать:

new Vue({
  vuetify,
  render: h => h(Gi, {props: {p1: 'awesome'}})
}).$mount('galeriaimages');

Однако я подозреваю, что вы на самом деле пытаетесь сделать не это.

В настоящее время кажется, что вы поднимаетесь прямо на <galeriaimages> элемент, что немного странно, но если вы удалите renderфункция должна работать. Вы также можете использоватьel вместо того $mount:

new Vue({
  vuetify,
  components: {galeriaimages: Gi},
  el: 'galeriaimages'
});

Я бы добавил, что в большинстве примеров используется renderдля корневого экземпляра Vue заключается в том, что она позволяет избежать необходимости включать компилятор шаблона в сборку Vue. Это работает, только если все ваши другие компоненты Vue предварительно собраны..vueфайлы. Если у вас есть какие-либо шаблоны во время выполнения, в том числе в вашем HTML, вам все равно необходимо включить компилятор шаблонов. В этом сценарии нет смысла использоватьrender функция в корневом экземпляре.

Answer 2

Вам необходимо предоставить компонент, соответствующий тегу <galeriaimages>. Ваша настраиваемая функция рендеринга переопределяет синтаксический анализ шаблона, поэтому он не анализирует<galeriaimages> как компонентный тег.

    new Vue({vuetify, components: {galeriaimages: Gi} }).$mount('galeriaimages');

Также ваши компоненты не создают никаких элементов. Они не умеют монтировать.