<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.) ?