js动态插入vue组件
组件:
<template>
<div>
{{title}}
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
},
beforeDestroy () {
},
methods: {
},
props:{
title:{
type:String
}
}
}
</script>
<style>
</style>
父组件:
<template>
<div style="background: #fff">
<div id="test-dom"></div>
</div>
</template>
<script>
import Vue from "vue";
import TestComponent from "./test-comp/index";
export default {
data() {
return {
Vue: Vue,
};
},
mounted() {
var tipComponent = Vue.extend({
render: (h) =>
h(TestComponent, {
props: {
title: "js动态插入vue组件",
}, //组件传值
}),
}); //生成组件的dom
const component = new tipComponent().$mount();
var DomContent = component.$el; //将vue结构转化成dom
document.getElementById("test-dom").appendChild(DomContent);
},
beforeDestroy() {},
components: {
TestComponent,
},
methods: {},
};
</script>
<style>
</style>