這篇文章主要介紹vue19如何組建Vue.extend component、組件模版、動態組件，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體代碼如下所示：
<!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:'<h4>我是標題3</h4>'
});
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:'<h4>我是標題3</h4>'
});
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:'<h4>{{msg}}</h4>'
});
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:'我是標題^^'
};
},
methods:{
change(){
this.msg='changed'
}
},
template:'<h4 @click="change">{{msg}}</h4>'
});
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({
template:'<h4>{{msg}}</h4>',
data(){// es6語法，函數不寫：，組件里面放數據: data必須是函數的形式，函數必須返回一個對象(json)
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部組件，放到某個組件內部，Vue.component('aaa',Aaa);
aaa:Aaa
}
});
</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">
<my-aaa></my-aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h4>{{msg}}</h4>',
data(){
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部組件
'my-aaa':Aaa
}
});
</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">
<my-aaa></my-aaa>
</div>
<script>
Vue.component('my-aaa',{//全局，公共的提出去
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box'
});
</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">
<my-aaa></my-aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
components:{ //局部
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h3 @click="change">標題2->{{msg}}</h3>'
}
}
});
</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">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<h2>標題1</h2>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</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">
<my-aaa></my-aaa>
</div>
<script type="x-template" id="aaa">
<h3 @click="change">標題2->{{msg}}</h3>
<ul>
<li>1111</li>
<li>222</li>
<li>3333</li>
<li>1111</li>
</ul>
</script>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態組件</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<input type="button" @click="a='aaa'" value="aaa組件">
<input type="button" @click="a='bbb'" value="bbb組件">
<component :is="a"></component> <!-- 動態組件-->
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h3>我是aaa組件</h3>'
},
'bbb':{
template:'<h3>我是bbb組件</h3>'
}
}
});
</script>
</body>
</html>下面看下vue component動態組件
動態組件
通過component標簽 的is屬性來進行組件的切換
is的屬性值決定要顯示的組件，所以將is的屬性值設置為data中的值，以便于動態變化
<template> <div class="app"> <component :is="組件名稱"> </component> </div> </template>
以上是“vue19如何組建Vue.extend component、組件模版、動態組件”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
