【vue】vue子组件传值给父组件、以及父组件传值给子组件（vue组件间传值）

前言

在业务场景中经常会遇到子组件向父组件传递数值，或是父组件向子组件传递数值，下面将结合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、子组件完整代码（富文本编辑器可重用组件）

<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、父组件完整代码（新闻编辑页面）

<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间的传值过了一遍，如上描述如有错漏，请大家评论区及时指出，多谢