Javascript 在Vue中使用带嵌套组件的v模型

在我的管理应用程序中，我有一个，在这个组件中，我也有Vue 2的羽毛丰富编辑器，它使用v-model作为数据，现在我想将v-model从我的子Vue-2-editor传递到我自己的父组件，文档说你可以在yur component中使用props值定制v-model，并用该值发出“输入”事件，但如何将一个v型模型传递到另一个，从子组件传递到父组件

Im使用vue 2编辑器，一个使用vue.js和Quill的文本编辑器：

我的组成部分：

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

节目编辑
从“vue2编辑器”导入{Vueditor}；
导出默认值{
名称：“ADMINeditor”，
道具：
{
值：{required:true，type:String}
},
数据（）
{
返回{
editorVisible:false
}
},
方法：
{
写（）
{
此.emit（'input'，此.value）；
}
}
}

我希望能够做到：

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

---

您可以通过创建单独的私有变量（在data（）中，而不是道具）来实现这一点，并将其用作
vue编辑器
组件上的
v-model
，然后观察它并在更改时发出
@input
事件，同时接收来自父v-model的更新，您需要观察
值
属性并更新私有变量

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


节目编辑
从“vue2编辑器”导入{Vueditor}；
导出默认值{
道具：
{
值：{required:true，type:String}
},
数据（）
{
返回{
pvalue:“”，
}
},
观察：{
价值（val）{
this.pvalue=val；
},
pvalue（val）{
此.$emit（'input'，val）；
}
}
}

注意
v-model=“pvalue”
TL；DR

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

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