子组件:
<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很相似