Vue >>父组件与子组件的数据互取

最新推荐文章于 2023-11-27 10:06:19 发布

原创最新推荐文章于 2023-11-27 10:06:19 发布 · 293 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#父子组件

Ant Design of Vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成富文本编辑器WangEditor，实现公告标题和内容的输入验证，以及编辑器内容的获取与清除。通过具体代码示例，展示了父组件与子组件之间的数据交互和事件响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建子组件：

<template>
  <div class="editor">
    <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="text"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'Editor',
  data () {
    return {
      editor: {},
      info_: ''
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    editorVisiable: {
      default: false
    }
  },
  mounted () {
    this.seteditor()
  },
  methods: {
    seteditor () {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
      this.editor.customConfig.onchange = html => {
        this.info_ = html // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }
      // 创建富文本编辑器
      this.editor.create()
    }
  }
}
</script>

父组件：

<template>
  <a-drawer
    title="新增公告"
    :maskClosable="false"
    width=1250
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="articleAddVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
     <a-form-item label='标题' v-bind="formItemLayout">
        <a-input v-model="article.title"
                 v-decorator="['title',
                   {rules: [
                    { required: true, message: '不能为空'},
                    { max: 100, message: '长度不能超过100个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='内容' v-bind="formItemLayout">
        <editor ref="editor"
          :editorVisiable="editorVisiable">
        </editor>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button @click="onClose">取消</a-button>
      <a-popconfirm title="确定提交？"  @confirm="handleSubmit" okText="确定" cancelText="取消" >
        <a-button style="margin-right: .8rem" type="primary" :loading="loading">提交</a-button>
      </a-popconfirm>
    </div>
  </a-drawer>
</template>
<script>
import Editor from './Editor'
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'ArticleAdd',
  components: {Editor},
  props: {
    articleAddVisiable: {
      default: false
    }
  },
  data () {
    return {
      editorVisiable: false
    }
  },
  methods: {
    reset () {
      this.loading = false
      this.article = {}
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.editorClear()
      this.$emit('close')
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        // 读取 html
        this.article.content = this.$refs.editor.editor.txt.html()
        if (!err) {
          this.$post('bjarticle', {
            ...this.article
          }).then(() => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
        this.editorClear()
      })
    },
    // 清空编辑器内容
    editorClear () {
      this.$refs.editor.editor.txt.clear()
    }
  }
}
</script>

总结：

1 父组件主动获取子组件的数据
<1> 父组件文件，使用子组件时，声明ref属性
<editor ref="editor"></editor>
<2 >父组件函数中直接调用

this.$refs.editor.属性
this.$refs.editor.方法

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

2 子组件调用父组件属性和方法

1 this.$parent.属性
2 this.$parent.方法