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成为传递的道具或默认值。

但是如果没有全局存储/状态，您就会迷上道具。

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

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

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

1 个答案: