在 Vue 中使用带有嵌套组件的 v-model

Question

在我的管理应用程序中，我有一个 ，在这个组件中我还有 Vue 2 的 quill rich 编辑器，它使用 v-model 作为数据，现在我想将 v-model 从我的子 vue-2-editor 传递到我自己的父组件，文档说您可以在您的组件中使用 props 值自定义 v-model 并发出具有该值的“输入”事件，但如何将一个 v-model 从子组件传递到另一个 v-model 到父组件。

我使用 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

长话短说

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

正如您所说，要v-model在组件中提供支持，您需要添加模型道具并发出模型事件以让父级知道您想要更新数据。

默认情况下v-model使用valueprop 和inputevent，但是从 2.2.0+ 开始，您可以自定义组件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>

Answer 2

您可以通过创建单独的私有变量（在 中data()，而不是 prop 中）来实现此目的，并将其用作组件v-model上的vue-editor，而不是监视它并@input在更改时发出事件，还要从父 v-model 接收更新，您需要监视propvalue并更新私有变量。

<template>
    <div style="width:auto; height:auto; display:flex; flex-direction.column;">
        <button @click="editorVisible = true">Show Editor</button>
        <vue-editor v-model="pvalue" :editorToolbar="customToolbar" useCustomImageHandler
            @imageAdded="handleImageAdded"></vue-editor>
    </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'
export default {
    props: {
        value: { required: true, type: String }
    },
    data() {
        return {
            pvalue: '',
        }
    },
    watch: {
        value(val) {
            this.pvalue = val
        },
        pvalue(val) {
            this.$emit('input', val)
        }
    }
}
</script>

笔记v-model="pvalue"