組件
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 js 特性擴展。
1. 全局 Vue.component(tagName, options)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<!-- // <script src="vue.js"></script> -->
</head>
<body>
<div id="box">
<test></test>
</div>
<script type="text/javascript">
//注冊
Vue.component('test', {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的組件'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
});
//創建根實例
var vm = new Vue({
el:'#box',
});
</script>
</body>
</html>
2. 局部注冊
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<test></test>
</div>
<script type="text/javascript">
///定義組件
var testTemplate = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部組件'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
//創建根實例
var vm = new Vue({
el:'#box',
components:{
'test': testTemplate
}
});
</script>
</body>
</html>
3. 動態切換組件
首先這樣用法，
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<components :is="testTemplate"></components>
</div>
<script type="text/javascript">
///定義組件
var testTemplate = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部組件1'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
//創建根實例
var vm = new Vue({
el:'#box'
});
</script>
</body>
</html>
下面有兩個 我們指定其中的一個
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="1" @click="a='testTemplate'">
<input type="button" value="2" @click="a='testTemplate2'">
<components :is="a"></components>
</div>
<script type="text/javascript">
///定義組件
var testTemplate = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部組件1'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
var testTemplate2 = {
template: '<div @click="change">{{msg}}</div>',
data:function(){
return {msg:'我的局部組件2'}
},
methods:{
change:function(){
//todo
console.log(this);
}
}
};
//創建根實例
var vm = new Vue({
el:'#box',
data:{
a: testTemplate //一開始讓a的第一個組件
},
components:{ //要把組件寫入到components里面，如果沒有放的話在切換的時候就會找不到 組件
'testTemplate':testTemplate,
'testTemplate2':testTemplate2
}
});
</script>
</body>
</html>