Question

我有2个不同的网站部分

首先：可以在另一个实例中使用一个实例，尤其是v-model，这是否有任何缺点。

第二次：我是否可以互相交叉引用，例如footer中的aside，即使一个在另一个之前声明。我的代码出错了。 "footer is undefined"

我的JS：

var aside = new Vue({
    "el":"aside",
    data:{
        name:"Peylan"
    }
});
var footer= new Vue({
    "el":"footer",
    data:{
        companyname:"Company Inc"
    }
});

我的HTML

<aside><h3 v-bind="footer.companyname"></h3></aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

Answer 1

处理所需内容的标准方法是使用共享的Vuex商店。

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<aside><h3 v-text="footer.companyname"></h3></aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

<script>
const store = new Vuex.Store({
    strict: false,
    state: {
        aside: {
            name:"Peylan"
        },
        footer: {
            companyname:"Company Inc"
        }
    }
});
var aside = new Vue({
    store,
    "el":"aside",
    data:{},
    computed: {
        ...Vuex.mapState(['aside', 'footer'])
    }
});
var footer= new Vue({
    store,
    "el":"footer",
    data:{},
    computed: {
        ...Vuex.mapState(['aside', 'footer'])
    }
});
</script>

上面的演示是一种非常简化的使用方式。为了最佳使用（如吸气剂，动作和突变），请考虑Vuex的官方文档。

或者您可以在两者上使用计算属性，如下所示。

这会产生一些鸡和蛋的问题，这就是为什么在这种情况下需要使用.$mount()的原因。

<script src="https://unpkg.com/vue"></script>

<aside><h3 v-text="footer.companyname"></h3>
</aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

<script>
var aside = new Vue({
    data:{
        name:"Peylan"
    },
    computed: {
        footer() { return footer; }
    }
});
var footer = new Vue({
    data:{
        companyname:"Company Inc"
    },
    computed: {
        aside() { return aside; }
    }
});
aside.$mount("aside");
footer.$mount("footer");
</script>

使用其他Vue实例中的变量并交叉引用它们

1 个答案: