Question

在我的管理应用程序中，我有一个，在此组件中，我还具有Vue 2的鹅毛笔丰富的编辑器，该编辑器使用v-model来存储其数据，现在我想将v-model从我的孩子vue-2-editor传递给我文档说，您可以在自己的父组件中拥有自定义的v模型，并使用props值来创建自定义v模型，并使用该值发出“输入”事件，但是如何将一个v模型从子组件传递给另一个组件。 / p>

我使用vue 2编辑器，使用Vue.js和Quill的文本编辑器： https://github.com/davidroyer/vue2-editor

我的组件：

<template>
<div style="width:auto; height:auto; display:flex; flex-direction.column;">
    <button @click="editorVisible = true">Show Editor</button>
    <vue-editor v-model="value" :editorToolbar="customToolbar" useCustomImageHandler @imageAdded="handleImageAdded"></vue-editor>
</div>
</template>
<!--SCRIPTS-->
<script>
import { VueEditor } from 'vue2-editor';
export default {
name: 'ADMINeditor',


props:
{
    value:{ required:true, type:String }
},


data()
{
    return { 
        editorVisible:false
    }
},


methods:
{

    wrote()
    {
        this.$emit('input', this.value);
    }
}


}
</script>
<!--STYLES-->
<style scoped>
</style>

我希望能够做到：

<admin-editor v-model="text"></admin-editor>

有关自定义组件中-model的更多信息。

https://alligator.io/vuejs/add-v-model-support/

Answer 1

您可以通过创建单独的私有变量（在data（）中，而不是在prop中）来实现此目标，并将其用作kUTTypeFileURL组件上的v-model，然后观看并发出{{1 }}发生变更时，也要从父v模型接收更新，还需要观看vue-editor属性并更新私有变量。

@input

注意value

Answer 2

TL; DR

<vue-editor :value="value" @input="$emit('input' $event)" />

就像您说的那样，要在组件中支持v-model，您需要添加模型道具并发出模型事件，以使父级知道您要更新数据。

默认情况下，v-model使用value道具和input事件，但是，从2.2.0+开始，您可以customize the component v-model。

<vue-editor>组件使用v-model默认属性和事件，因此，它期望拥有value属性，并在数据更新时发出input事件。

所以：

<vue-editor v-model="value" />

等效于：

<vue-editor :value="xxx" @input="onXxxUpdate"

您的<admin-editor>组件还需要支持v-model，因此您需要执行相同的<vue-editor>组件，添加模型属性并发出模型事件。

然后，每当input组件发出<admin-editor>事件时，就从<vue-editor>发出input事件。

<template>
  <vue-editor :value="value" @input="onEditorUpdate" />
</template>

<script>
import { VueEditor } from 'vue2-editor'

export default {
  name: 'AdminEditor',

  props: {
    value: {
      type: String,
      default: '',
    },
  },

  methods: {
    onEditorUpdate(newVal) {
      //           ^^^^^^
      //           <vue-editor> input event payload
      this.$emit('input', newVal)
    },
  },
}
</script>

在Vue中将v-model与嵌套组件一起使用

2 个答案: