vue 利用v-html渲染页面的时候 如果在method内写了一个方法来渲染页面 ，组件加载不出来的情况吗？

Question

页面中一个元素内嵌套deals组件，前端根据后端返回固定字段替换成组件，但是页面中没加载出来。

!

Answer 1

你这样写组件渲染是不对的。或许render构建一下可以。

我之前处理富文本的时候写过一个类型的。

1. 处理字符串为对象

   1. '111111222111111111'变成[{type:1,value:'111111'},{type:2,value:'222'},{type:1,value:'111111111'}]
2. v-for遍历传入子组件
3. 子组件判断type用不同的组件渲染

Answer 2

会不会把这个对象JSON.stringify(this.dataInfo.deals_list[p1].item)一下就可以了？

Answer 3

使用v-html这种方式是不能加载组件的！其实你的功能也就是常规的父子组件传值，只用注意生命周期就可以实现啦；

在父组件中加载子组件时候的顺序为：父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→父组件mounted;

如果我没有理解错的话：

<template>
  <div>
    <!-- 导入组件 -->
    <component v-bind:is="content" :post_info="info"></component>
  </div>
</template>

<script>
  import question from "./question.vue";
  export default {
    data() {
      return {
        content: '',
        info: ''
      }
    },
    components: {
      question
    },
    created() {
      this.content = 'question'
      //更改这个值
      this.info = '111'
    },
  };
</script>

子组件

<template>
    <div>
        子组件sdd
    </div>
</template>
<script>
export default{
    props:['post_info'],
    mounted() {
     console.log('child_msg',this.post_info)
  },
}

</script>