大家好，又见面了，我是你们的朋友全栈君。
前言
在业务场景中经常会遇到子组件向父组件传递数值，或是父组件向子组件传递数值，下面将结合vue富文本框一起来了解一下父与子组件之间的传值
业务场景
在vue项目中创建了一个可以重复使用的富文本编辑器（可参考【vue】vue富文本编辑器（可重复使用组件）vue-quill-editor），由于是新闻编辑页面，首先需要把已经保存好的新闻内容展示在富文本编辑器中（父组件向子组件传值），其次需要把更新后的新闻内容保存到数据库中（子组件向父组件传值）
父组件向子组件传值 (v-bind:child-props)
1、业务：新闻编辑页面中，把新闻内容传递给子组件富文本编辑器
2、方法：
<子组件名称 v-bind: 子组件中的props=”父组件中的data”></子组件名称>
如：<Editor v-bind:content=”parentContent”></Editor>
3、实例：
A、子组件关键代码
<quill-editor
class=”editor”
v-model=”editorContent”//给富文本编辑器赋值
ref=”myQuillEditor”
:options=”editorOption”
@blur=”onEditorBlur($event)”
@focus=”onEditorFocus($event)”
@change=”onEditorChange($event)”
></quill-editor>
export default { props: [“content”],//定义父组件传值的属性content，父组件中可以通过content把数据传递给子组件 data() { return { editorOption: {}, editorContent:this.content //通过props把数据赋值给data，然后通过v-model给富文本编辑器赋值 }; },
B、父组件关键代码
import Editor from “@/components/VueEditor”;// 引入子组件
<Editor v-bind:content=”parentContent” @child-event=”parentEvent”></Editor>//通过v-bind:子组件props进行数据的传
子组件向父组件传值 (@childemit=parentEvent)
1、业务：在新闻编辑页面中，在富文本编辑器中（子组件）更新内容后，把最新的内容传递给到新闻页面中（父组件）
2、方法：
<子组件名称 @子组件中的emit=”父组件中的methods”></子组件名称>
如：<Editor @childemit=”parentEvent” ></Editor>
3、实例：
A、父组件关键代码
<Editor v-bind:content=”parentContent” @childemit=”parentEvent”></Editor>
//@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、子组件完整代码（富文本编辑器可重用组件）
代码语言：javascript复制<template>
<quill-editor
class="editor"
v-model="editorContent"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
export default {
props: ["content"],
data() {
return {
editorOption: {},
editorContent:this.content
};
},
computed: {
editor() {
//console.log(this.$refs.myTextEditor.quillEditor);
return this.$refs.myTextEditor.quillEditor;
},
},
methods: {
onEditorBlur() {},
onEditorFocus(e) {
//编辑器获得焦点的事件
//console.log(e);
},
onEditorChange(e) {
//内容改变事件
this.$emit('childemit', e.html)
},
},
};
</script>
<style>
</style>B、父组件完整代码（新闻编辑页面）
代码语言：javascript复制<template>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Id">
<el-input v-model="form.id"></el-input>
</el-form-item>
<el-form-item label="Title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="Content">
<Editor
v-bind:content="parentContent"
@childemit="parentEvent"
></Editor>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button type="primary" @click="onCancel">Cancel</el-button>
</el-form-item>
</el-form>
</template>
<script>
import Editor from "@/components/VueEditor";
export default {
components: {
Editor,
},
data() {
return {
form: this.$store.state.newsitem,
parentContent: this.$store.state.newsitem.content,
};
},
methods: {
parentEvent(data) {
this.parentContent = data;
},
onSubmit() {
let form = this.form;
const restweburl = "http://localhost:5000/";
const requestOptions = JSON.stringify({
id: 1,
title: form.title,
publishDate: "2020-10-10",
pageUrl: form.pageUrl,
content: this.parentContent,
author: null,
});
console.log('1133');
console.log(requestOptions);
/*
this.$axios
.post(restweburl "api/Article/UpdateNews", requestOptions)
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
console.log("submit!");*/
},
onCancel() {
this.$router.push({ path: "/" });
},
},
};
</script>
<style>
</style>至此，根据业务场景将vue间的传值过了一遍，如上描述如有错漏，请大家评论区及时指出，多谢
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
