本例利用 Vue.extend() 实现左侧input 框中输入文本，动态加载组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.extend(options)</title>
<script src="vue.js"></script>
<style>
div{
200px;
height: 100px;
background-color: #eee;
padding: 50px;
border-radius: 10px;
border: 1px solid #ddd;
color: #000;
}
#alert{
position: absolute;
text-align: center;
animation: alertComp 1s ease both;
}
@keyframes alertComp {
from{
top: 100px;
left: 50px;
}
to{
top: 200px;
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model='msg'>
<button @click='defin_alert'>点击</button>
</div>
<template id='alertComponent'>
<div id="alert">
我是动态组件:<br/>
<span style="color:burlywood;font-size: 36px;">{{myData}}</span>
</div>
</template>
</body>
<script>
const vm = new Vue({
el:'#app',
data() {
return {
msg:'ok'
}
},
methods: {
defin_alert(){
let info = document.getElementById('alert')
if(info !== null && info !== undefined){
document.body.removeChild(info)
}
let testComponent = Vue.extend({
props:['myData'],
template:'#alertComponent'
})
const extendComponent = new testComponent({
propsData:{
myData:vm.msg
}
}).$mount()
document.body.appendChild(extendComponent.$el)
}
},
})
</script>
</html>