組件化
組件化就是一種拆解復(fù)雜問題的思路，一般是將復(fù)雜的頁(yè)面拆解成一個(gè)個(gè)小的可復(fù)用的組件，方便組織和管理，擴(kuò)展性強(qiáng)。
組件的使用步驟：
1.創(chuàng)建組件構(gòu)造器 Vue.extend()
2.注冊(cè)組件 Vue.component()
3.使用組件 實(shí)例作用范圍使用
<div id="app1">
<!-- 3.在實(shí)例作用范圍使用 -->
<cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1. 創(chuàng)建組件構(gòu)造器
const cpn = Vue.extend({
template: `
<div>
<h2>我是標(biāo)題</h2>
<p>我是組件中的內(nèi)容</p>
</div>
`
})
// 2.注冊(cè)組件
Vue.component('cpn', cpn)// 全局組件
const app = new Vue({
el: '#app1',
})
</script>
</body>
為什么組件中的data只能是函數(shù)
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>{{counter}}</h2>
<button @click="btnClick">按鈕</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const obj = {
counter: 0
}
const app = new Vue({
el: '#app',
components: {
'cpn': {
template: '#cpn',
data() {// 當(dāng)data（）為函數(shù)時(shí) 每個(gè)<cpn></cpn> 中的count 是獨(dú)立的，
若data{}.每個(gè) <cpn></cpn>中的count都指向data中的count，
只要改變其中一個(gè)所有的都會(huì)改變
return {
counter: 0
}
},
methods: {
btnClick() {
this.counter++
}
}
}
}
})
</script>
</body>
父子組件傳遞數(shù)據(jù)
通過(guò)props向子組件傳遞數(shù)據(jù)
通過(guò)事件向父組件發(fā)送消息
父組件通過(guò)props向子組件傳遞數(shù)據(jù)
注意點(diǎn)：props中的駝峰表示要使用'-'將大寫轉(zhuǎn)換成小寫連接起來(lái)
子組件通過(guò)事件向父組件發(fā)送消息
一般props的值只能由父組件傳過(guò)來(lái)的值進(jìn)行改變。子組件不能修改，且一般input的v-model的value都是放在data(),錯(cuò)在value值放到props的中
解決方案
實(shí)現(xiàn)子組件輸入框輸入的值改變父子組件原來(lái)的值
父子組件的訪問方式： $children
父組件訪問子組件：使用refs
子組件訪問父組件：使用$parent
我們先來(lái)看下children是一個(gè)數(shù)組類型，它包含所有子組件對(duì)象。
我們這里通過(guò)一個(gè)遍歷，取出所有子組件的message狀態(tài)。
$refs的使用：
$refs和ref指令通常是一起使用的。
首先，我們通過(guò)ref給某一個(gè)子組件綁定一個(gè)特定的ID。
其次，通過(guò)this.$refs.ID就可以訪問到該組件了。
非父子組件通信
剛才我們討論的都是父子組件間的通信，那如果是非父子關(guān)系呢?
非父子組件關(guān)系包括多個(gè)層級(jí)的組件，也包括兄弟組件的關(guān)系。
在Vue2.x中，有一種方案是通過(guò)中央事件總線，也就是一個(gè)中介來(lái)完成。
但是這種方案和直接使用Vuex的狀態(tài)管理方案還是遜色很多。
并且Vuex提供了更多好用的功能，所以這里我們暫且不討論這種方案，后續(xù)我們專門學(xué)習(xí)Vuex的狀態(tài)管理。
