一：场景介绍

笔者在一个商城项目中有这样一个场景，商品管理维护vue组件中，使用了一个富文本编辑器用于编辑商品详情，由于此编辑器

多处使用到，故而将此抽离存放在一个单独的vue组件中，需要使用该编辑器的界面，可以使用import来引入该vue组件，做为自

组件。

但在实际使用过程当中，却发现取值或者是赋值遇到了困难，故记录下此解决方法，方便他人也便于自己以后查找。

二：具体代码

详细的代码我就不贴上来了，主要还是在Product.vue中引入MEdit.vue

Product.vue代码

<template>

<MEdit></MEdit>
。。。。。。

</template>
<script>
  import addForm from '@/view/MEdit.vue'
  export default {
      components: {Product},
      ......
   }
</script>

MEdit.vue代码很简单，就是一个简单的富文本编辑器的使用

三：取值方法

在获取到该方法之前，笔者采用了至少两种方法，包括定义v-model来取值，都以失败告终，其中的跌宕起伏的过程这里就不赘述

了(一把辛酸泪呀!)。这里就直接上解决方法吧

Product.vue

<template>

<MEdit ref="medit"></MEdit>
。。。。。。

</template>
<script>
  import addForm from '@/view/MEdit.vue'
  export default {
      components: {Product},
      ......
   }
</script>

注意这里的ref方法  增加一个ref，父组件能通过$refs直接拿到子组件实例。

this.$refs.medit.form

 使用上面的方法即可以取到你要的组件中的对象值。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

.NET C# JAVA 基础交流群  1095936339  欢迎入群 交流