1.談?wù)勀銓M件的理解
提高代碼的可復(fù)用性
2.分別寫出如何全局注冊和局部注冊組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局注冊組件和局部注冊組件</title>
<div>我是全局注冊的組件</div>
<style>
p{
margin-bottom: 0;
}
#app{
margin-bottom: 20px;
}
#app .jubu{
color: rgb(228, 26, 184);
}
.quanju{
color: rgb(73, 228, 26);
}
</style>
</head>
<body>
<div id="app">
<p>此處為全局注冊的組件</p>
<my-component></my-component>
<p>此處為局部注冊的組件</p>
<app-component></app-component>
<p>vue的組件模板在某些情況下會受到html標(biāo)簽的限制松申，比如table標(biāo)簽中，只能有tr,td,這些元素磅摹，所以在table中使用組件是無效的蚁飒，此時可以使用is屬性來掛載組件</p>
<table>
這里是最終不是我們想要的dom結(jié)構(gòu)
<app-component></app-component>
</table>
<table>
這里才是我們想要的dom結(jié)構(gòu)
<tbody is="my-component"></tbody>
<tbody is="app-component"></tbody>
</table>
</div>
<div id="bpp">
此處為bpp組件
<p>此處為全局注冊的組件</p>
<my-component></my-component>
<p>此處為app局部注冊的組件不生效</p>
<app-component></app-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-component',{
template:'<div class="quanju">我是全局注冊的組件</div>'
})
var app = new Vue({
el:'#app',
data:{
},
components:{
'app-component':{
template:'<div class="jubu">我是局部注冊的組件</div>'
}
}
})
var bpp = new Vue({
el:'#bpp',
data:{
},
})
</script>
</body>
</html>
3.寫出一個父組件給子組件傳遞信息的demo
4.寫出一個子組件向父組件傳遞信息的demo
5.寫出一個非父子組件之間的通信demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<bcomponent></bcomponent>
<ccomponent></ccomponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
//建立一個bus中轉(zhuǎn)站
bus:new Vue()
},
components:{
'bcomponent':{
template:'<div><button @click="handle">點(diǎn)擊我向c組件內(nèi)傳遞信息</button></div>',
data:function(){
return{
aaa:'我是來自b組件的內(nèi)容',
}
},
methods:{
handle:function(){
//$root訪問根組件的內(nèi)容
this.$root.bus.$emit('lala',this.aaa);
}
}
},
'ccomponent':{
template:'<div></div>',
created:function(){
//C組件在實(shí)例創(chuàng)建的時候就監(jiān)聽事件---lala事件
this.$root.bus.$on('lala',function(value){
alert(value)
})
}
}
}
})
</script>
</body>
</html>
注意事項
- 推薦使用小寫字母加-進(jìn)行命名（必須） child, my-componnet命名組件
- template中的內(nèi)容必須被一個DOM元素包括 瞬浓，也可以嵌套
- 在組件的定義中旋讹，除了template之外的其他選項—data,computed,methods
- data必須是一個方法
@ vue組件中camelCased (駝峰式) 命名與 kebab-case（短橫
線命名）
@ 在html中, myMessage 和 mymessage 是一致的,,因此在組件中的html
中使用必須使用kebab-case（短橫線）命名方式序厉。在html中不允許使用駝
峰！Ｏ酢Ｈ啊Ｖ岛А！缕减！
@ 在組件中, 父組件給子組件傳遞數(shù)據(jù)必須用短橫線雷客。在template中芒珠，必
須使用駝峰命名方式桥狡，若為短橫線的命名方式。則會直接保錯皱卓。
@ 在組件的data中,用this.XXX引用時,只能是駝峰命名方式裹芝。若為短橫線
的命名方式，則會報錯娜汁。
使用props傳遞數(shù)據(jù) 父親向兒子傳遞數(shù)據(jù)
- 在組件中使用props來從父親組件接收參數(shù)嫂易，注意，在props中定義的屬性掐禁，都可以在
組件中直接使用 - propps來自父級怜械，而組件中data return的數(shù)據(jù)就是組件自己的數(shù)據(jù)，兩種情況作用域就是
組件本身傅事，可以在template缕允，computed，methods中直接使用 - props的值有兩種蹭越，一種是字符串?dāng)?shù)組障本，一種是對象，本節(jié)先只講數(shù)組
- 可以使用v-bind動態(tài)綁定父組件來的內(nèi)容
