Vue.js 2 动态组件中的值不更新?

Question

起因: 一段element-ui代码:

  <el-popover trigger="hover" placement="top">
    内容全显示
    <div slot="reference" >
     内容全显示
    </div>
  </el-popover>

个人觉得：内容全显示，这一部分需要复制有点烦人. 所以自已写了一个小组件:EllipsisTip. 调用后，只需要一次性: 内容全显示. 在项目中这部分是来自一堆异步统计的数字如下:

                  <ellipsis-tip :style-obj="tetStyleObj">
                    <div id="fullBodyTemplate">
                    符合条件企业：<em class="red-c">{{ statisticsb.applyCount }}</em>家,
                    注册资本/出资额合计<em class="red-c">{{ statisticsb.fundCHN }}</em>亿元/
                    <em class="red-c">{{ statisticsb.fundUSA }}</em>亿美元,
                    实缴注册资本/出资额<em class="red-c">{{ statisticsb.currentFundCHN }}</em>亿元/
                    <em class="red-c">{{ statisticsb.currentFundUSA }}</em>亿美元,
                    管理规模合计<em class="red-c">{{ statisticsb.fundamoutCHNHN }}</em>亿元/
                    <em class="red-c">{{ statisticsb.amoutUSA }}</em>亿美元,
                    从业人数<em class="red-c">{{ statisticsb.staffSize }}</em>人
                    </div>
                  </ellipsis-tip>

接上一个问题: Vue.js 2 VNode数组怎么插入到某个元素下?

在一位大佬(whidy)的指点下. 动态组件(detailRenderer)可以渲染了. 服务端API拿到数据后，slot中绑定的变量不变了.

EllipsisTip目前的代码如下:

<template>
  <el-popover trigger="hover" placement="top" ref="fullText">
    <div slot="reference" v-bind:style="styleObject">
      <slot></slot>
    </div>
    <div v-html="fullText" id="fullBody"/>
  </el-popover>
</template>

<script>
import Vue from "vue";
import nodeRenderer from "@/utils/RenderNode";
const DetailConstructor = Vue.extend(nodeRenderer);
export default {
  name: 'TxtEllipsisTipCMP',
  props: {
    // 附着的元素.用于取得内容填充
    styleObj: {
      default: ()=>{},
      type: Object
    }
  },
  mounted() {
    this.styleObject = Object.assign({}, {textOverflow: 'ellipsis', width: '100%', overflow: 'hidden', whiteSpace: 'nowrap'}, this.styleObj)
    // 方案1 - 参考 https://stackoverflow.com/a/50937178/3089701
    const detailRenderer = new DetailConstructor({
        propsData: {
          node: this.$slots.default
        },
    });
    console.log(detailRenderer.$mount(), detailRenderer.$el.outerHTML); // $el是dom对象，任意操作
    this.fullText = detailRenderer.$el.innerHTML
  },
  data() {
    return {
      // 所有内容
      fullText: '',
      styleObject: {},
    }
  }
}
</script>
<style scoped>
</style>

RenderNode的代码跟大佬(whidy)贴的一样

Answer 1

拿到数据后用v-if切换下EllipsisTip的渲染状态

Answer 2

提供一个其他思路：

<template>
  <el-popover trigger="hover" placement="top" ref="fullText">
    <div slot="reference" v-bind:style="styleObject">
      <slot></slot>
    </div>
    <slot></slot>
  </el-popover>
</template>

<script>
export default {
  name: 'TxtEllipsisTipCMP',
  props: {
    // 附着的元素.用于取得内容填充
    styleObj: {
      default: ()=>{},
      type: Object
    }
  },
  mounted () {
    this.styleObject = Object.assign({}, {textOverflow: 'ellipsis', width: '100%', overflow: 'hidden', whiteSpace: 'nowrap'}, this.styleObj)
  },
  data() {
    return {
      // 所有内容
      styleObject: {},
    }
  }
}
</script>
<style scoped>
</style>