組件
- 組件 (Component) 是 Vue.js 最強大的功能之一
- 組件可以擴展 HTML 元素胆萧，封裝可重用的代
組件注冊
全局注冊
- Vue.component('組件名稱', { }) 第1個參數是標簽名稱鄙币，第2個參數是一個選項對象
-
全局組件注冊后，任何vue實例都可以用
組件基礎用
<div id="example">
<!-- 2校翔、 組件使用 組件名稱 是以HTML標簽的形式使用 -->
<my-component></my-component>
</div>
<script>
// 注冊組件
// 1蝗茁、 my-component 就是組件中自定義的標簽名
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
組件注意事項
- 組件參數的data值必須是函數同時這個函數要求返回一個對象
- 組件模板必須是單個根元素
- 組件模板的內容可以是模板字符串
- 組件命名如果用駝峰命名法蝗羊，那么插入實例的時候要換成短橫線精置，因為html標簽對大小寫不敏感
<div id="app">
<!--
4、 組件可以重復使用多次
因為data中返回的是一個對象所以每個組件中的數據是私有的
即每個實例可以維護一份被返回對象的獨立的拷貝
-->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<!-- 8娇豫、必須使用短橫線的方式使用組件 -->
<hello-world></hello-world>
</div>
<script type="text/javascript">
//5 在組件模板中 使用其他組件匙姜，可以使用駝峰命名法，也可以使用短橫線
// 7锤躁、在普通實例的標簽模板中搁料，必須使用短橫線的方式使用組件
Vue.component('HelloWorld', {
data: function(){
return {
msg: 'HelloWorld'
}
},
template: '<div>{{msg}}</div>'
});
Vue.component('button-counter', {
// 1、組件參數的data值必須是函數
// 同時這個函數要求返回一個對象
data: function(){
return {
count: 0
}
},
// 2系羞、組件模板必須是單個根元素
// 3郭计、組件模板的內容可以是模板字符串
template: `
<div>
<button @click="handle">點擊了{{count}}次</button>
<button>測試123</button>
# 6 在字符串模板中可以使用駝峰的方式使用組件
<HelloWorld></HelloWorld>
</div>
`,
methods: {
handle: function(){
this.count += 2;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
局部注冊
<div id="app">
<my-component></my-component>
</div>
<script>
// 定義組件的模板
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
//局部注冊組件
components: {
// <my-component> 將只在父模板可用 一定要在實例上注冊了才能在html文件中使用
'my-component': Child
}
})
</script>
Vue 調試工具
Vue組件之間傳值
**父組件向子組件傳值
- 父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上。
- 然后子組件用屬性props接收
- 在props中使用駝峰形式椒振，模板中需要使用短橫線的形式字符串形式的模板中沒有這個限制
<div id="app">
<div>{{pmsg}}</div>
<!--1昭伸、menu-item 在 APP中嵌套著 故 menu-item 為 子組件 -->
<!-- 給子組件傳入一個靜態(tài)的值 -->
<menu-item title='來自父組件的值'></menu-item>
<!-- 2、 需要動態(tài)的數據的時候 需要屬性綁定的形式設置 此時 ptitle 來自父組件data 中的數據 .
傳的值可以是數字澎迎、對象庐杨、數組等等
-->
<menu-item :title='ptitle' content='hello'></menu-item>
</div>
<script type="text/javascript">
Vue.component('menu-item', {
// 3、 子組件用屬性props接收父組件傳遞過來的數據
props: ['title', 'content'],
data: function() {
return {
msg: '子組件本身的數據'
}
},
template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父組件中內容',
ptitle: '動態(tài)綁定屬性'
}
});
</script>
**子組件向父組件傳值
- 子組件用
$emit()觸發(fā)事件
-
$emit() 第一個參數為 自定義的事件名稱 第二個參數為需要傳遞的數據
- 父組件用v-on 監(jiān)聽子組件的事件
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<!-- 2 父組件用v-on 監(jiān)聽子組件的事件
這里 enlarge-text 是從 $emit 中的第一個參數對應 handle 為對應的事件處理函數
-->
<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
子組件向父組件傳值-攜帶參數
*/
Vue.component('menu-item', {
props: ['parr'],
template: `
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
### 1夹供、子組件用$emit()觸發(fā)事件
### 第一個參數為 自定義的事件名稱 第二個參數為需要傳遞的數據
<button @click='$emit("enlarge-text", 5)'>擴大父組件中字體大小</button>
<button @click='$emit("enlarge-text", 10)'>擴大父組件中字體大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父組件中內容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(val){
// 擴大字體大小
this.fontSize += val;
}
}
});
</script>
兄弟之間的傳遞
- 兄弟之間傳遞數據需要借助于事件中心灵份，通過事件中心傳遞數據
- 提供事件中心 var hub = new Vue()
- 傳遞數據方，通過一個事件觸發(fā)hub.$emit(方法名哮洽，傳遞的數據)
- 接收數據方填渠，通過mounted(){} 鉤子中 觸發(fā)hub.$on()方法名
- 銷毀事件 通過hub.$off()方法名銷毀之后無法進行傳遞數據
<div id="app">
<div>父組件</div>
<div>
<button @click='handle'>銷毀事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
兄弟組件之間數據傳遞
*/
//1、 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>點擊</button>
</div>
</div>
`,
methods: {
handle: function(){
//2、傳遞數據方氛什，通過一個事件觸發(fā)hub.$emit(方法名莺葫，傳遞的數據) 觸發(fā)兄弟組件的事件
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 3、接收數據方枪眉，通過mounted(){} 鉤子中 觸發(fā)hub.$on(方法名
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>點擊</button>
</div>
</div>
`,
methods: {
handle: function(){
//2捺檬、傳遞數據方，通過一個事件觸發(fā)hub.$emit(方法名贸铜，傳遞的數據) 觸發(fā)兄弟組件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 3堡纬、接收數據方，通過mounted(){} 鉤子中 觸發(fā)hub.$on()方法名
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
//4萨脑、銷毀事件 通過hub.$off()方法名銷毀之后無法進行傳遞數據
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
</script>
