1.Vue中是如何引入組件（對(duì)象 構(gòu)造函數(shù) ）
1.1. Vue是vue實(shí)例的構(gòu)造函數(shù)缆毁， 通過(guò)new Vue() 就可以得到vue實(shí)例
1.2. new Vue.extend這個(gè)方法得到的是 new Vue的一個(gè)子類(lèi)
1.3. 平時(shí)我們不適用new 來(lái)實(shí)例化Vue.extend() , 將其當(dāng)做標(biāo)簽來(lái)用
1.4. 組件在使用的時(shí)候，我們需要注冊(cè) 一下 货徙，
1.5. 注冊(cè)提供了兩種方式：全局注冊(cè)， 局部注冊(cè) 分別對(duì)應(yīng)的是：全局組件 局部組件
1.6. 組件也是一個(gè)實(shí)例 ，實(shí)例也是一個(gè)組件
var vm = new Vue()
var Component = Vue.extend() ;
console.log( vm )
console.log( new Component)
// console.log( Vue ) // vue實(shí)例的構(gòu)造函數(shù)
// console.log( Vue.extend() ) //組件的構(gòu)造函數(shù)
2.全局注冊(cè)組件
<body>
<div id="app">
<hello></hello>
<hello></hello>
</div>
</body>
<script>
// 注冊(cè)的第一種方式： 全局注冊(cè)
var Hello = Vue.extend({
template:'<h3>這里是組件的模板</h3>'
})
// 全局注冊(cè)
Vue.component('hello',Hello)
// 使用 注冊(cè)的組件必須掛載在一個(gè)實(shí)例上，才能使用
new Vue({
el:"#app",
})
/* 技巧：
1. 模板
2. 組件名稱(chēng)
3. 組件必須使用在實(shí)例中 */
</script>
3.局部注冊(cè)組件
<body>
<div id="app">
<myYyb></myYyb>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
/* 局部注冊(cè)組件是將組件放在實(shí)例的配置項(xiàng)中 ，通過(guò)components屬性引用劈猿，使用范圍僅限當(dāng)前實(shí)例 */
// 1. 先來(lái)個(gè)組件的配置項(xiàng)（模板 數(shù)據(jù) 。潮孽。。）
var Hello = Vue.extend({
template:'<h1>這里是局部注冊(cè)</h1>'
})
//2. 注冊(cè)組件（局部注冊(cè)）
new Vue({
el:'#app',
components:{//局部組件
"my-yyb":Hello //組件的名稱(chēng):組件的配置項(xiàng)
}
})
// 3. 將組件名稱(chēng)當(dāng)做標(biāo)簽寫(xiě)在當(dāng)前實(shí)例中
</script>
4.其他創(chuàng)建方式
<body>
<div id="app">
<hello></hello>
<item></item>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
// 注冊(cè)的第二種方式 Vue.extend()
// 全局組件
Vue.component('hello',{
template:'<h3>這是全局組件的配置使用方式</h3>'
})
new Vue({
el:'#app',
// 局部組件
components:{
'item':{
template:'<h4>這里是局部組件配置的使用</h4>'
}
}
})
</script>
5.is屬性的用法
<body>
<div id="app">
<table>
<tr is = 'hello'>
</tr>
</table>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
/*
像 table ul select ...這類(lèi)型里面的子級(jí)是死的 筷黔，這類(lèi)型我們直接使用組件時(shí)往史，無(wú)法正確解析，
解決辦法： 給他添加一個(gè)is屬性
*/
//使用規(guī)則
Vue.component('hello',{
template:'<tr><td>這里是組件使用規(guī)則</td></tr>'
})
new Vue({
el:'#app',
})
</script>
6.template模板
6.1 當(dāng)我們的模板內(nèi)容較多佛舱，較復(fù)雜時(shí)椎例，這個(gè)配置項(xiàng)就有點(diǎn)復(fù)雜了---》
解決辦法：使用template模板（html結(jié)構(gòu)中）
6.2當(dāng)然項(xiàng)目中我們不這樣子使用，我們將來(lái)使用的是一種叫做jsx語(yǔ)法 單文件組件
6.3template模板下直接元素只有一個(gè)
<body>
<div id="app">
<hello></hello>
</div>
<template id="hello">
<div>
<p>這里是template模板</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
Vue.component('hello',{
// 1. 當(dāng)我們的模板內(nèi)容較多请祖，較復(fù)雜時(shí)订歪，這個(gè)配置項(xiàng)就有點(diǎn)復(fù)雜了---》解決辦法：使用template模板（html結(jié)構(gòu)中）
// 2.當(dāng)然項(xiàng)目中我們不這樣子使用，我們將來(lái)使用的是一種叫做jsx語(yǔ)法 單文件組件
// 3. template模板下直接子元素只有一個(gè)
template:'#hello'
})
new Vue({
el:'#app'
})
</script>
7.綁定is 屬性
<body>
<div id="app">
<!-- <button @click = ' isShow = !isShow '>
toggle
</button>
<aaa v-if = 'isShow'></aaa>
<bbb v-else></bbb> -->
<button
@click = ' component = (component == "bbb"?"aaa":"bbb") '
>
toggle
</button>
<component :is='component'></component>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
// 綁定is 屬性
Vue.component('aaa',{
template:'<h3>這里是aaa組件</h3>'
})
Vue.component('bbb',{
template:'<h3>這里是bbb組件</h3>'
})
new Vue({
el:'#app',
data:{
isShow:true,
component:'bbb'
}
})
</script>
8.組件的嵌套
/* 1. 在vue中肆捕，項(xiàng)目都有一個(gè)跟實(shí)例刷晋，這個(gè)根實(shí)例中有大量的組件，組件之間都可以發(fā)生嵌套慎陵，
2. 在vue中眼虱，組件嵌套只能形成父子關(guān)系
3. 對(duì)于全局組件來(lái)說(shuō)，父子關(guān)系只是存在于嵌套的時(shí)候 */
<body>
<div id="app">
<father></father>
</div>
<script src="base/vue.js"></script>
<script>
Vue.component("father",{
template:"<h1>這里是father組件 <son></son></h1>"
})
Vue.component("son",{
template:"<h4>這里是son組件 <grandson></grandson></h4>",
components:{//components
"grandson":{
template:"<h6>這里是grandson組件</h6>"
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
9.******（重點(diǎn)）組件之間的數(shù)據(jù)傳遞
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>
這里是父組件
</p>
<input type="text" v-model = 'fatherData'>
<p>
{{fatherData}}
</p>
<hr>
<son :aa = 'fatherData'></son><!-- 2.將這個(gè)數(shù)據(jù)通過(guò)一個(gè)自定義屬性綁定在子組件標(biāo)簽上 -->
</div>
</template>
<template id="son">
<div>
<p>
這里是子組件
</p>
<p>
這里是父?jìng)鬟f給子級(jí)的數(shù)據(jù)：{{aa}}<!--4. 在子組件模板中就可以將這個(gè)屬性當(dāng)做data來(lái)直接使用 {{自定義屬性}} -->
</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
/* *****************s級(jí)重點(diǎn) ： 父組件傳遞數(shù)據(jù)給子組件 席纽？ */
Vue.component('father',{
template:'#father',
data(){//1.在父組件中定義一個(gè)數(shù)據(jù) 捏悬，（這個(gè)數(shù)據(jù)是使用的data函數(shù)的返回值）
return {
fatherData:'father'
}
}
})
Vue.component('son',{
template:'#son',
props:['aa']//3.在子組件的配置項(xiàng)目中使用props:['自定義屬性'] 來(lái)接受來(lái)自父組件的數(shù)據(jù)
})
new Vue({
el:'#app',
data:{
msg:'yyb'
}
})
</script>
10.*******sss使用的局部注冊(cè) 來(lái)實(shí)現(xiàn) 父組件傳遞數(shù)據(jù)給子組件
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<input type="text" v-model="soncolor">
<hr />
<son :color="soncolor"></son>
</div>
</template>
<template id="son">
<div>
<input type="text" v-model="owncolor">
<div :style="{background:owncolor}" class="box"></div>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// ******** s 使用的局部注冊(cè) 來(lái)實(shí)現(xiàn) 父組件傳遞數(shù)據(jù)給子組件
//父組件可以通過(guò)v-bind來(lái)為子組件傳遞數(shù)據(jù)，當(dāng)父組件的數(shù)據(jù)改變的時(shí)候润梯，子組件接收到的數(shù)據(jù)也會(huì)改變
//父組件重新設(shè)置data數(shù)據(jù)的時(shí)候过牙，會(huì)重新執(zhí)行render函數(shù)甥厦，會(huì)重新給子組件傳入最新的數(shù)據(jù)
new Vue({
el: "#app",
components: {
'father': {
template: "#father",
data: function () { 0
return {
soncolor: 'red'
}
},
components: {
'son': {
props: ['color'],
template: "#son",
computed: {
owncolor: function () {
return 'sky' + this.color
}
}
}
}
}
}
})
</script>
11.數(shù)據(jù)共享
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>
aaa組件
</p>
<input type="text" v-model="msg.val">
<p>
{{msg.val}}
</p>
<bbb :msg="msg"><!-- 將msg綁定給bbb -->
<!-- 這里給的是對(duì)象 思路堆和棧原理。給bbb對(duì)象寇钉。相當(dāng)于給了他地址-->
</bbb>
</div>
</template>
<template id="bbb">
<div>
<p>bbb組件 </p>
<input type="text" v-model="msg.val">
<p>
{{msg.val}}
</p>
</div>
</template>
<script src="base/vue.js"></script>
<script>
Vue.component("aaa",{
template:"#aaa",
data(){
return{//將msg的值更改為一個(gè)對(duì)象
msg:{val:"zsq"}
}
}
})
Vue.component("bbb",{
template:"#bbb",
props:["msg"]//獲取msg
})
new Vue({
el:"#app"
})
</script>
</body>
12.數(shù)據(jù)共享---數(shù)據(jù)類(lèi)型驗(yàn)證（props驗(yàn)證/validator）
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>
aaa組件
</p>
<input type="text" v-model="num">
<p>
{{num}}
</p>
<hr>
<bbb :num="num" :n="n">
</bbb>
</div>
</template>
<template id="bbb">
<div>
<p>bbb組件 </p>
<input type="text" v-model="num">
<p>
{{n}}
</p>
</div>
</template>
<script src="base/vue.js"></script>
<script>
Vue.component("aaa",{
template:"#aaa",
data(){
return{
"num":233,
"n":10
}
}
})
Vue.component("bbb",{
template:"#bbb",
//這里是數(shù)據(jù)驗(yàn)證
props:{
"num":Number,//常規(guī)檢測(cè)數(shù)據(jù)類(lèi)型
"n":{
validator(val){//對(duì)數(shù)據(jù)進(jìn)行條件驗(yàn)證檢測(cè)刀疙。出現(xiàn)錯(cuò)誤會(huì)在控制臺(tái)報(bào)告
//validator函數(shù)的使用是為了解決我們除了數(shù)據(jù)類(lèi)型檢測(cè)之外的其他要求
return val>6;
}
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
13.組件之間的通信
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>這 里是aaa組件</p>
<p>
{{msg}}
</p>
<hr>
<bbb :fn = 'fn'></bbb>
</div>
</template>
<template id="bbb">
<div>
<button @click = 'fn("word")'>
say
</button>
<p>這里是bbb組件</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// 將父組件中的方法傳遞給子組件，子組件中可以通過(guò)事件來(lái)觸發(fā)這個(gè)屬性摧莽，如果這個(gè)函數(shù)中參數(shù)和父組件中的數(shù)據(jù)聯(lián)系起來(lái)庙洼，那么我們就可以實(shí)現(xiàn)一個(gè) 通過(guò)子組件事件來(lái)更改父組件數(shù)據(jù)的方式
// 父組件傳遞數(shù)據(jù)給子組件考的是 屬性綁定
// 子組件傳遞數(shù)據(jù)給父組件靠的是 事件（方式）
Vue.component('aaa',{
template:'#aaa',
data(){
return {
msg:'yyb'
}
},
methods:{
fn(val){
this.msg = val ;
}
}
})
Vue.component('bbb',{
template:'#bbb',
props:['fn'],
methods:{
oFn(){
console.log( this.$parent )
}
}
})
new Vue({
el:'#app'
})
</script>
14.組件之間的通信
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>這是aaa組件</p>
<input type="text" v-model='msg'>
<p>
{{msg}}
</p>
<hr>
<bbb :msg = 'msg' ></bbb>
<ccc :msg = 'msg' ></ccc>
</div>
</template>
<template id="bbb">
<div>
<p>
這是bbb組件
</p>
<input type="text" v-model='bbbData'>
<p>
{{bbbData}}
</p>
<p>
這里是bbbmsg: {{bbbmsg}}
</p>
</div>
</template>
<template id="ccc">
<div>
<p>
這是ccc組件
</p>
<input type="text" v-model='cccData'>
<p>
{{cccData}}
</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
Vue.component('aaa',{
template:'#aaa',
data(){
return {
msg:'bingge'
}
}
})
Vue.component('bbb',{
template:'#bbb',
props:['msg','get'],
data(){
return {
bbbmsg:'bingge'
}
},
computed:{
bbbData:{
get(){
return this.msg ;
},
set( val ){
//
console.log(this.$parent)
}
}
}
})
Vue.component('ccc',{
template:'#ccc',
props:['msg'],
data(){
return {
cccmsg:'bingge'
}
},
computed:{
cccData:{
get(){
return this.msg ;
},
set( val ){
//需求：修改bbb組件的值？
// d級(jí)小重點(diǎn) ： 尋找父級(jí)的方式來(lái)進(jìn)行組件之間的通信： 這類(lèi)型方法對(duì)導(dǎo)致镊辕，我們書(shū)寫(xiě)的混亂一級(jí)不易維護(hù)
this.$parent.$children[0].bbbmsg = 'aaa' ;
}
}
}
})
new Vue({
el:'#app'
})
</script>
15.子組件通過(guò)方法傳遞數(shù)據(jù)給父組件
<body>
<div id="app">
<father ></father>
</div>
<template id="father">
<div>
<p>
這里是father組件
</p>
<p>
{{fatherData}}
</p>
<hr>
<son @toson = 'get'></son>
</div>
</template>
<template id="son">
<div>
<p>
這里是son組件
</p>
<button @click = '_get'>
發(fā)送
</button>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// s級(jí)重點(diǎn)：子組件通過(guò)方法來(lái)傳遞數(shù)據(jù)
Vue.component('father',{
template:'#father',
data(){
return {
fatherData:'father'
}
},
methods:{
get(val){//val就是son 組件傳遞過(guò)來(lái)的數(shù)據(jù)
this.fatherData = val ;
}
}
})
Vue.component('son',{
template:'#son',
props:['toson'],
data(){
return {
sonData:'son'
}
},
methods:{
_get(){
this.$emit('toson',this.sonData)
}
}
})
new Vue({
el:'#app'
})
</script>
16.組件通信-ref
<body>
<div id="app">
<button @click = ' get'>
get
</button>
<input type="text" v-model = ' msg '>
<aaa ref = 'aaa'></aaa>
<bbb ref = 'bbb'></bbb>
</div>
<template id="aaa">
<div>
<p>
這里是aaa組件
</p>
<hr>
</div>
</template>
<template id="bbb">
<div>
<p>
這里是bbb組件
</p>
<p>
{{msg}}
</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
/*
1. 組件間不僅可以用過(guò)$root/$parent/$children來(lái)獲取對(duì)應(yīng)關(guān)系的組件油够，
2. 父組件還可以主動(dòng)的通過(guò)ref為子組件做標(biāo)記也會(huì)形成ref鏈，也可以交互征懈，注意多個(gè)子組件標(biāo)記的是同一個(gè)組件石咬，獲取到的應(yīng)該是一個(gè)數(shù)組
3. 如果是非父子組件也是可以進(jìn)行通信的
*/
Vue.component('aaa',{
template:'#aaa',
methods:{
get(){
this.$refs.son.msg = 'yyb'
}
}
})
Vue.component('bbb',{
template:'#bbb',
data(){
return {
msg:'bbb'
}
}
})
new Vue({
el:'#app',
data:{
msg:'兵哥'
},
methods:{
get(){
//ref
this.$refs.bbb.msg = this.msg
}
}
})
</script>
17.組件通信-slot
<body>
<div id="app">
<item>
<header>
這里是頭部
</header>
<h6>
這里是item組件中的標(biāo)簽
</h6>
<footer>
這里是底部
</footer>
</item>
</div>
<template id="item">
<div>
<slot></slot>
<h3>
這里是item組件
</h3>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
//在組件標(biāo)簽內(nèi)部寫(xiě)入的內(nèi)容默認(rèn)的會(huì)被替換掉，如果想要在組件的模板里使用這些內(nèi)容卖哎，就在對(duì)應(yīng)的位置寫(xiě)上slot標(biāo)簽鬼悠，這個(gè)slot標(biāo)簽就代表著這些內(nèi)容
/*
slot 稱(chēng)之為分發(fā)
*/
Vue.component('item',{
template:'#item'
})
new Vue({
el:'#app'
})
</script>
18.組件通信-slot-name
<body>
<div id="app">
<aaa>
<nav slot = 'header'>
這里是導(dǎo)航
</nav>
<footer slot='footer'>
這里是底部
</footer>
</aaa>
</div>
<template id="aaa">
<div>
<slot name='header'></slot>
<h3>這里是aaa組件</h3>
<slot name='footer'></slot>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
//在slot內(nèi)容上通過(guò)slot屬性標(biāo)記后，在子組件中使用slot的時(shí)候可以用name屬性去指定
Vue.component('aaa',{
template:'#aaa'
})
new Vue({
el:'#app',
})
</script>
