Vue.js 如何绑定本地组件'；将数据对象复制到外部组件

如何使用本地组件的数据属性绑定外部组件的

v-model

例如，我有这个组件

<publish-blog>
<VueTrix v-model="form.editorContent">
</publish-blog>

---

因此，

form.editorContent

这里指的是

publish blog

组件的form.editorContent内部数据，我该怎么做

您可以将一个道具传递给

发布博客

组件

这将是您使用发布博客的任何页面或组件，但老实说，我不知道您为什么不将

VueTrix

组件放在

publish blog

组件中

这将出现在您想要的页面/组件上

<template>
    <PublishBlog :trix="trix">
        <VueTrix v-model="trix" />
    </PublishBlog>
</template>

<script>
import PublishBlog from './PublishBlog.vue';

export default {
    components: {
        PublishBlog,
    },
    data() {
        return {
            trix: '',
        };
    },
};
</script>

---

您可以考虑使用VUEX（）来跨组件共享数据，但如果没有某种存储模式，它会变得非常丑陋。我不想使用VUEX。对于本例，一种快速而肮脏的方法是将所需的数据存储在全局

窗口
对象中。话虽如此，我还是强烈推荐使用Vuex。仅仅是字符串trix？那会通过吗？那很好。它仍然以同样的方式工作，你能看到道具在它之前是怎样的吗？这是将prop绑定到数据变量trix，因此该变量等于将要传递的值。因此，当VueTrix将
v-model
变量trix更新为其内容时。道具也将被更新。我已经更新了我的回复，以显示发布博客组件可能是什么样子的，你说你正在内联进行，所以它可能看起来不同。
<template>
    <section>
        what ever goes here.
        <slot />
    </section>
</template>

<script>
export default {
    name: 'PublishBlog',
    props: {
        trix: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            form: {
                editorContent: this.trix
            },
        };
    },
};
</script>