vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

2020-06-12 21:23:25易采站长站整理

具体代码如下所示:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
</div>
<script>
var Aaa=Vue.extend({//继承出来一个Vue类Aaa
template:'<h3>我是标题3</h3>'
});
var a=new Aaa();//a跟vm一样
console.log(a);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);//aaa是组建实例,全局组件
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>

<script>
var Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'
};
},
template:'<h3>{{msg}}</h3>'
});

Vue.component('aaa',Aaa);

var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});

</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>

<script>
var Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'