★組件嵌套 全局組件的嵌套 局部組件的嵌套
父子組件 全局組件的父子關系是根據使用來決定的
全局組件嵌套
父子組件傳參（父-->子）
1.需要在子組件配置里聲明一個props,用來拋出一個自定義的標簽屬性
2.子組件 利用這個拋出的 標簽屬性來 綁定 父組件的數據。達到父控子的效果
//有兩個組件father son 通過father組件里的按鈕操作控制son組件里的div的顯示和隱藏
<div id="contain">
<father></father> //使用
</div>
<template id="father"> //father組件模板
<div>
father{{fhide}}
<button @click="show">show/hide_fa</button> //點按鈕控制子組件的div顯示隱藏
<hr />
<son :pop='fhide'></son> //fhide是變量 要用 :pop
</div>
</template>
<template id="son"> //son組件模板
<div>
son{{pop}}
<div class="show"
v-if="pop"></div> //這里v-if綁定的是自定義的pop
</div>
</template>
<script>
Vue.component("father",{
template:'#father',
data(){ return { fhide:true } },
methods:{
show(){ this.fhide=!this.fhide }
}
});
Vue.component("son",{
template:'#son',
data(){ return { } },
methods:{ },
props:['pop'] //這里聲明pop自定義標簽屬性
});
new Vue({
el:"#contain",
})
父子組件傳參（子-->父）
//有兩個組件father son 通過子組件son里的按鈕操作控制父組件father里的div的顯示和隱藏
在子組件上創建一個自定義
方法，
v-on:自定義方法名 父組件的處理函數
這個自定義方法的處理函數是父組件里的方法，
由
子組件觸發
這個方法 this.$emit('自定義方法的名字'，[可選參數])
<div id="contain">
<father></father>
</div>
<template id="father">
<div>
father
<button @click="show">show/hide</button> //這里是可以調用本組件的方法
<div class="show" v-if="showState"></div> //綁定值
<hr />
<son @test='show'></son> //
① @test 是自定義方法 處理函數show是father的
</div>
</template>
<template id="son">
<div>
son
<button @click="sclick">show/hide</button> //
③ 調用本組件的方法sclick </div>
</template>
<script>
Vue.component("father",{
template:'#father',
data(){ return { showState:true } },
methods:{
show(){this.showState=!this.showState},
//
②
}
});
Vue.component("son",{
template:'#son',
data(){ return { } },
methods:{
sclick
(){
this.$emit('test'
)
} //
④ sclick方法觸發test方法 this.$emit(test)
},
});
new Vue({
el:"#contain",
})
------------
this.$emit('test','han','麗麗') 也可以傳參,參數不限
...show(val1,val2){
console.log(val1); //han
console.log(val2); //麗麗
this.showState=!this.showState}
兄弟傳參：
親兄弟傳參 套的比較近，通過共有的父元素；嵌套的太深的話就不要用父元素了
組件ab 親兄弟 組件a里的按鈕 可以 控制組件b 里div的顯示隱藏
//原理：結合父子傳參與子父傳參 尋找公有組件
//I,II,III是子父 ①-④ 是父子
<div id="contain">
這里vue實例的{{state}} <!-- vue 的 -->
<hr />
<old @custom='custom'></old> <!-- ① 自定義事件 觸發的事件屬於他的父親即vue -->
<hr />
<young :test='state'></young> <!--II將state傳給young組件-->
</div>
<template id="old">
<div>
old_borther
<button @click="emit">觸發事件</button> <!--③ 在本組件里寫一個方法emit 用來觸發那個自定義事件-->
</div>
</template>
<template id="young">
<div>
young_borther {{test}} <!--III這時便能使用了 這里綁定的值時父組件的值-->
</div>
</template>
<script>
Vue.component("old",{
template:'#old',
data(){ return { } },
methods:{
emit(){ //④ 觸發那個自定義事件
this.$emit('custom'); }
}
});
Vue.component("young",{
template:'#young',
data(){ return { } },
methods:{ },
props:['test'] // I 拋出標簽屬性
});
new Vue({ //在本案例中相當於橋梁
el:"#contain",
data:{
state:true //改變你
},
methods:{
custom(){ //② 觸發事件的執行函數
this.state=!this.state
}
}
})
//當點擊子組件按鈕時，改變父組件的值，而父組件的值又使另一個子組件的值改變，這樣就達到了兄弟組件的傳參
非親兄弟傳參 也可以用上方法 但是麻煩 可以用第三方實例
1.創建一個空的vue實例
2.為vue實例綁定一個方法
3.只要能獲取到這個vue實例 不管在什么地方都能通過 $emit()來觸發綁定事件
重點是在 調用的是 要修改數據的組件內部的一個方法
-------------------------------------------
<div id="app">
<father></father>
</div>
<template id="f1">
<div >
{{name}}
<hr />
<s1></s1>
<hr />
<s2></s2>
</div>
</template>
<template id="s1">
<div >
{{name}}
<button @click="sclick">click</button>
</div>
</template>
<template id="s2">
<div >
{{name}}
</div>
</template>
<script>
let angle=new Vue(); //僅創建一個空的Vue充當橋梁，不需要配置項
new Vue({
el:'#app',
data:{ },
components:{
father:{
template:"#f1",
data(){
return{ name:'我是父組件' }
},
components:{
s1:{ template:"#s1",
data(){
return{ name:"我是子組件1" }
},
methods:{
sclick(){
console.log('這是s1的方法');
angle.$emit('test') //觸發 在能獲得angle的地都能調用
}
}
},
s2:{ template:"#s2",
data(){
return{ name:"我是子組件2" }
},
methods:{
custom(){
console.log('我是s2的自定義方法')
this.name='相良'
}
},
mounted(){//生命周期 掛載完成后
angle.$on('test',this.custom)
}
}
}
}
}
})