據說vue最偉大的功能就是組件啦～
我就是把官網的demo自己小練習一下，然后跟著imooc學習學習，做個筆記
開始吧！～
1.1全局組件
要注冊一個全局組件，你可以使用Vue.component(tagName, options)。
Vue.component('my-header',
{template:'<p>this is my header</p>'
'})
new Vue({
el: '#app',
components:{
'my-header':myHeader
}
})
1.2局部組件
首先在根組件注冊
new Vue({
el: '#app',
components:{
'my-header':myHeader
}
})
在前面寫
var myHeaderChild={
template:'<p>i am header child</p>'
}
var myHeader={
template:'<p><my-header-child></my-header-child></p>',
components:{
'my-header-child'myHeaderChild
}
}
注意??避免組件data里直接賦值，引用賦值會影響其他組件
data里必須是函數，直接{{}}沒用，看實例????
根據官網的demo寫個增加刪除的按鈕們吧～
首先注冊組件
new Vue({
el: '#app',
components:{
increase,
decrease
}
})
兩個子組件，data用函數
var increase={
template:<button @click="count++">{{count}}</button>
'{{count}}',
data(){return {count:0}}}
var decrease={
template:<button @click="count--">{{count}}</button>
'{{count}}',
data(){return {count:0}}}
敲可愛@～@
昨天寫的，今天又忘了，于是乎，給自己寫了一個header，加油～
在main.js中
下面就是重頭戲啊！組件的通信：props，emit，slot
官網的圖??
2.1 父給子傳遞：props
1??靜態props
最簡單的props
Vue.component('child',{
props:['message'],
template:'<p>hello {{ message }}</p>'})
<child message="world"></child>
但其實，官網的demo就是最好的例子
app.vue是根組件，里面componnets文件里有個hello.vue
它們之間就可以通信
我們在app.vue里的<hello myword='hello world from parent'></hello>給子組件賦值
然后在hello.vue里先在export default{props:[myword]}里聲明一下父組件的值，再在子組件template里{{myword}}這樣就可以啦～
2??動態props
父組件
<input v-model="myVal">
<hello :my-value="myVal">
記得在data里聲明
data(){
return {
myVal: ' '
}}
子組件
<template>
<p>{{myValuve}}</p>
</template>
2.2 子給父傳遞
使用$on(eventName)監聽事件
使用$emit(eventName)觸發事件
舉個??
在子組件模版中定義一個button 添加一個click事件
<button @click="emitMyEvent">emit</button>
在子組件方法指令中添加一個新方法
emitMyEvent(){
this.$emit('my-event',this.msg)
}
在父組件方法指令中定義新方法
getMyEvent(msg){
console.log('i got my event'+msg)
}
在父組件模版中
<hello @my-event="getMyEvent"></hello >
再舉個??
我們實現兩個button求和的例子，一正一負。
子組件：
<template>
<button @click="calculate" >{{count}}</button>
</template>
data(){
return {
count:0
}},
methods:{
calculate(){
this.count++,
this.$emit("calculate")//傳遞事件給父組件
}}
父組件引入2個子組件
<template>
<hello v-on:calculate="calcutotal"></hello>
<hello v-on:calculate="subcalcutotal"></hello>
</template>
data(){
return{
total:0
}}
methods:{
calcutotal(){
this.total++},
subcalcutotal(){
this.total--}}
3 ?slot插槽
如果我想在父組件中，給子組件添加內容要怎么呢？slot插槽來幫你！
define：混合父組件的內容與子組件自己的模板，這個過程被稱為內容分發
還是剛才的??
如果我要給按鈕前面加上標簽要怎么辦呢？
直接在子標簽中間加入我們要加的東西
具名slot
我們可以給slot name 然后指定的去使用
4. 動態組件
如果我有多個組件，想隨時切換怎么辦呢？is大法來幫你！
在父組件中聲明,就可以隨心切換啦～！
<p :is="current"></p>
data(){
return{
current:'Hello'
}}
keep-alive 可以緩存，避免重新渲染，加快速度
總結一下：
