【vue】vue子组件传值给父组件、以及父组件传值给子组件(vue组件间传值)

VUE 专栏收录该内容
16 篇文章 2 订阅

前言

在业务场景中经常会遇到子组件向父组件传递数值,或是父组件向子组件传递数值,下面将结合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间的传值过了一遍,如上描述如有错漏,请大家评论区及时指出,多谢

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值