Parameters can only be passed through propsData when the subcomponents created by Vue.extend are instantiated.

< H2 > the components are as follows < / H2 >
<template>
    <div ref="container" class="container">
        <div class="list"></div>
        <div class-"btns">
            <button @click="create"></button>
        </div>
    </div>
</template>
<script>
import user from "user.vue"; // user.vue 
export default {
    mounted () {
        this.container = this.$refs.container;
        this.list = this.container.getElementsByClassName("list")[0];
    } , 
    methods: {
        create () {
            let div = document.createElement("div");
                div.className = "item";
            let render = document.createElement("div");
            let myComponent = Vue.extend(user);
            new myComponent({
                data () {
                    // 
                    _test_: "test data"
                } , 
                propsData: {
                    // 
                    //  ... 
                    __id__: "testid"
                } , 
                provide: {
                    // 
                    find: this.find
                }
            }).$mount(render);
            div.appendChild(render);
            this.list.appendChild(div);
        } , 
        find () {
                console.log("nihao");
            }
    }
};
</script>

Click the button in the above component to regret mounting the user subcomponent instance to div , and then add div to list . user.vue is as follows:

<template>..</template>
<script>
export default {
    data () {
        return {
            say: "nihao"
        };
    } , 
    props: ["__id__"] , 
    inject: ["find"] , //  vue 
    mounted () {
         this.$nextTick(() => {
             console.log(this.$parent); // undefined
             console.log(this._testid_); // undefined
             console.log(this.__id__); // testid
             console.log(this.find); // undefined 
         });
    }
};
</script>

is a child component created by Vue.extend , without context (without the concept of parent component, it is an independent component individual), can only transfer data through propsData (of course, you can also use global things, do not consider.) ?


ide/reactivity.html" rel=" nofollow noreferrer "https://cn.vuejs.org/v2/guide.,
see the solution through the above link, saying that the components created in this way cannot be updated accordingly, but use the listening method and the global method set to update the props on Synchronize
build something like this

in the Vue instance.
  1. First= > is a component, the simplest component.
  2. create such a method in the mounted method defined in the parent component, and then
  3. childrenVue is used to store the element you want to wrap. Name is the data, of the parent element. This is to update the child element created by vue.extend in the parent element while updating the name data of the parent element.
  the github source code for https://blog.csdn.net/u012491.], which I talked about on my blog, is done with the: is feature, so that the component props can dynamically transmit data. In fact, my git code has been updated to the extend method, which is written above, the core principle is the same, take a closer look at my code, just a few words, learn from each other 

Menu