Vue.extend 创建的子组件实例如何共享其他上级组件例如 $root、$parent 等都享有的属性 or 方法??

假设 user.vue 的内容如下:

<template>...</template>
<script>
export default {
    mounted () {
        console.log(this);
        console.log(this.$root , this.$root === this);
        console.log(this.$parent , this.$root === this.$parent);
    }
};
</script>

user.vue 作为普通组件:

test.vue 中引入:

<template>
<div>
    <user></user>
</div>
</template>
<script>
    import user from 'user.vue';
    export default {
        components: {
            user
        }
    }
</script>

以下 user.vue mounted 中的判断结果:

console.log(this); // VueComponent
console.log(this.$root , this.$root === this); // VueComponent(test.vue)实例; false
console.log(this.$parent , this.$root === this.$parent); // VueComponent(test.vue)实例; false

user.vue 通过 Vue.extend 把组件当成是一个独立的 vue 实例:

test.vue 中引入:

<template>
    <div ref='con'></div>
</template>
<script>
import user from 'user.vue';
export default {
    mounted () {
        let con = this.$refs.con;
        let _con = document.createElement('div');
        let render = document.createElement('div');
        _con.appendChild(render);
        let myComponent = Vue.extend(user);
        new myComponent().$mount(render);
        con.appendChild(_con);
    }
};
</script>

以下 user.vue mounted 中的判断结果:

console.log(this); // VueComponent
console.log(this.$root , this.$root === this); // VueComponent(user.vue)实例; true
console.log(this.$parent , this.$root === this.$parent); // undefined; false

以上可以知道,使用 Vue.extend 实例化的 Vue 子类属于独立个体,他就相当于直接使用 Vue 进行实例化!和引用他们的组件毫无关联,即使他们是在某个组件内通过 Vue.extend 实例化的,也不会和该组件有任何关联!!

而实际的需求是,我需要他们关联起来,因为只有使用 Vue.extend 方法才能够在任意 dom 位置动态的进行渲染组件!且支持多组件共存!但是,比如说某个组件内通过 Vue.extend 方法进行实例化后,我需要该实例也能够按照正常组件那样嵌套在正常的组件层级中,这样就可以通过 $root$parentvuex 中的 $storevue-router 中的 $route 访问到同其他上级组件共享的属性和方法了!!

请问该如何实现??

回答:

不知道我理解的对不对啊,我觉得你可以手动给extend出来的组件挂载上最方便的$parent,这样不就解决了?

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注