JS子组件编写HTML代码片段传递给父组件，再展示在页面上

子组件：

<template>
  <div class="upload-container">
    <el-button :style="{background:color,borderColor:color}" size="mini" type="primary" @click="pushBusinessInformation">
      商家信息
    </el-button>
  </div>
</template>

<script>
  // import { getToken } from 'api/qiniu'

  export default {
    name: 'pushBusinessInformation',
    props: {
      color: {
        type: String,
        default: '#1890ff'
      }
    },
    data() {
      return {

      }
    },
    methods: {
      pushBusinessInformation() {
        var htmlFragment =
          "<div id=sm_shop_tp>" +
            "<p>商家名字：<span>XXX</span></p>" +
            "<p>商家地址：<span>XXX</span></p>" +
            "<p>商家联系方式：<span>XXX</span></p>" +
          "</div>"
        this.$emit('htmlFragment',htmlFragment);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

父组件

<template>
  <div>
    <businessInformation color="#1890ff" class="editor-upload-btn" @htmlFragment="htmlFragment" />
  </div>
</template>
<script>
import businessInformation from './components/businessInformation'
export default {
  name: 'Tinymce',
  components: {businessInformation},
  data() {
    return {
    }
  },
  methods: {
    // 将HTML代码片段插入页面
    htmlFragment(htmlFragment){
    
    }
  }
}
</script>

将子组件中写好的HTML模板插入父页面中
方法一：用vue的 v-html指令

<template>
  <div>
  <span v=html="htmlFragment"></span>
    <businessInformation color="#1890ff" class="editor-upload-btn" @htmlFragment="htmlFragment" />
  </div>
</template>
<script>
import businessInformation from './components/businessInformation'
export default {
  name: 'Tinymce',
  components: {businessInformation},
  data() {
    return {
    	htmlFragment:'',
    }
  },
  methods: {
    // 将HTML代码片段插入页面
    htmlFragment(htmlFragment){
    	this.htmlFragment = htmlFragment;
    }
  }
}
</script>

方法二：innerhtml

<template>
  <div>
  <span id="htmlFragment"></span>
    <businessInformation color="#1890ff" class="editor-upload-btn" @htmlFragment="htmlFragment" />
  </div>
</template>
<script>
import businessInformation from './components/businessInformation'
export default {
  name: 'Tinymce',
  components: {businessInformation},
  data() {
    return {
    }
  },
  methods: {
    // 将HTML代码片段插入页面
    htmlFragment(htmlFragment){
    	document.getElementById("htmlFragment").innerHTML=htmlFragment;
    }
  }
}
</script>

方法三：vue 自定义插槽
可以将父组件HTML中编写好的代码片段插入到子组件中，虽不能满足当前业务需求，但记录下来做个提醒
方法四：JS原生方法
跟innerHTML很相似