vue.js - 如何将本地组件的数据对象绑定到外部组件

Question

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

例如我有这个组件

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

所以form.editorContent那里指的是publish-blog组件的 form.editorContent 内部数据，我该怎么做？

Answer 1

您可以将道具传递给publish-blog组件。

这将是您使用发布博客的任何页面或组件，但老实说，我不确定您为什么不将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>

并在发布博客组件内部设置form.editorContent传递的道具或默认值。

但是如果没有全局存储/状态，你就会被道具困住。

更新：显示发布博客组件的外观

发布博客.vue

<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>