Vue создать дочерний экземпляр компонента вручную, установить родительский или нет, будет влиять на значение дочернего экземпляра установить проп

Question

1. код:

// Child Component
var TestComp = Vue.component('TestComp', {
    template: `<div>Child Component Prop Value : {{text}} </div>`,
    // child component prop --> text
    props: {
        text: {
            default: 'init prop'
        }
    }
});


// Parent
var vm = window.vm = new Vue({
    el: "#root",
    template: "#app",
    mounted() {
        this.createSubComp();
    },
    data() {return {}},
    methods: {
        createSubComp() {
            var that = this;
            var copy = Vue.extend(TestComp);
            var instance = window.vmsub = new copy({
                // here, remove comment
                // parent: that
            });
            // add or remove comment above, cause different result 
            instance.text = 'pass child component prop';
            instance.$mount();
            this.$el.append(instance.$el);
        }
    },
    components: {
        TestComp
    }
});

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="root"></div>

<script type="text/x-template" id="app">
  <div style="height: 100; border: 1px solid red; overflow: auto;">
  </div>
</script>

дочерний компонент: TestComp, он имеет атрибут prop с именем 'text',
и метод родительского компонента с именем 'createSubComp' пытается создать экземпляр дочернего компонента
Когда «parent: that» прокомментирован, как сейчас, «instance.text =« xx »» выполняется успешно и не выдает исключений.
Но когда я удаляю 'parent: это комментарий,' instance.text = 'xx' 'выдает исключение:
Избегайте прямого изменения объекта, так как значение будет перезаписываться всякий раз, когда родительский компонент будет перерисовываться,
Вместо этого,используйте данные или вычисляемое свойство, основанное на значении реквизита.Опора изменена: «текст»
Я хочу добавить код 'parent: that', чтобы дочерний экземпляр мог отображаться в vue-devtools.Я хочу знать, что дает другой результат, когда я добавляю / удаляю комментарий.

Плохой английский ... спасибо ...

Answer 1

Я думаю, что ваш подход к компонентам Vue выглядит как обходной путь для достижения чего-то особенного ...

Но если это не так, то более простой подход Vue для реализации, который будет выглядеть так,просто позвольте Vue.js сделать то, что он сделал:

// Child Component
var TestComp = Vue.component('TestComp', {
    template: `<div>Child Component Prop Value : {{text}} </div>`,
    // child component prop --> text
    props: {
        text: {
            default: 'init prop'
        }
    }
});


// Parent
var vm = window.vm = new Vue({
    el: "#root",
    template: '<test-comp text="pass child component props" />', // passing props to child component, using template
    data() {return {}},
    components: {
        TestComp
    }
});

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="root"></div>

<script type="text/x-template" id="app">
  <div style="height: 100; border: 1px solid red; overflow: auto;">
  </div>
</script>

Vue.js создаст для вас дочерний компонент