前言
在业务场景中经常会遇到子组件向父组件传递数值，或是父组件向子组件传递数值，下面将结合vue富文本框一起来了解一下父与子组件之间的传值
业务场景
在vue项目中创建了一个可以重复使用的富文本编辑器（可参考【vue】vue富文本编辑器（可重复使用组件）vue-quill-editor），由于是新闻编辑页面，首先需要把已经保存好的新闻内容展示在富文本编辑器中（父组件向子组件传值），其次需要把更新后的新闻内容保存到数据库中（子组件向父组件传值）
父组件向子组件传值 (v-bind:child-props)
1、业务：新闻编辑页面中，把新闻内容传递给子组件富文本编辑器
2、方法：
<子组件名称 v-bind: 子组件中的props="父组件中的data">
如：
3、实例：
A、子组件关键代码
class=”editor”
v-model=”editorContent”//给富文本编辑器赋值
ref=”myQuillEditor”
:options=”editorOption”
@blur=”onEditorBlur($event)”
@focus=”onEditorFocus($event)”
@change=”onEditorChange($event)”
>
B、父组件关键代码
import Editor from “@/components/VueEditor”;// 引入子组件
v-bind:content=”parentContent” @child-event=”parentEvent”>
//通过v-bind:子组件props进行数据的传
子组件向父组件传值 (@childemit=parentEvent)
1、业务：在新闻编辑页面中，在富文本编辑器中（子组件）更新内容后，把最新的内容传递给到新闻页面中（父组件）
2、方法：
<子组件名称 @子组件中的emit="父组件中的methods">
如：
3、实例：
A、父组件关键代码
@childemit=”parentEvent”>
//@childemit：通过@定义emit，然后在子组件中通过this.$emit(‘childemit’, value)把value传递给父组件
//parentEvent：在父组件中定义一个method，在method中可以获取到从子组件传递过来的值
methods: {
parentEvent(data) {
this.parentContent = data;
},
B、子组件关键代码
在富文本编辑器编辑内容的事件中使用 this.$emit(‘childemit’, value)
methods: {
onEditorBlur() {},
onEditorFocus(e) {
//编辑器获得焦点的事件
//console.log(e);
},
onEditorChange(e) {
//内容改变事件
this.$emit(‘childemit’, e.html)
},
}
完整代码
A、子组件完整代码（富文本编辑器可重用组件）
B、父组件完整代码（新闻编辑页面）
Create
Cancel
至此，根据业务场景将vue间的传值过了一遍，如上描述如有错漏，请大家评论区及时指出，多谢
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220768.html原文链接：https://javaforall.net
