組件
vue支持自定義組件旭蠕，用戶可以根據自己的需求封裝一個公共的組件氛琢，實現
組件的復用。
一個單獨的vue文件就是一個組件冰垄。組件的注冊 分為全局注冊 和 局部注冊。
import Vue from 'vue'
import editView from './rateCardEdit.vue';
Vue.component('editView', editView)
全局注冊后扒秸，在任意組件中可以使用 'editView'組件播演，使用方法為
<editView></editView>
import regionTree from '../../components/regionTree';
export default {
components: {
regionTree,
},
data() {
return {
regionInfo: {},
}
},
}
局部注冊，在父組件中 通過 components: regionTree 注冊使用伴奥。
組件Props
props 是組件中重要的一個選項写烤，起到父子組件橋梁的作用。
用法如下：
父組件中 通過 v-bind 綁定自定義的一個屬性拾徙。
<el-card >
<regionTree v-bind:showCheckBox="false" v-bind:showLeaf="false" v-on:nodeClick='treeNodeClick'></regionTree>
</el-card>
子組件中 通過props接收數據洲炊。
export default {
props: ["showCheckBox","showLeaf"],
data() {
return {
//datas
}
這樣 當父組件中屬性值發(fā)生改變，對應的子組件中的值也會發(fā)生改變尼啡。
組件通信
組件間通信是開發(fā)環(huán)節(jié)重要的一環(huán)暂衡，我們既希望組件獨立，數據互補干涉崖瞭，又不可避免組件間會有聯(lián)系和交互狂巢。可以通過直接訪問书聚，自定義事件進行跨組件函數調用唧领。
直接訪問
- $parent: 父組件實例
- $children藻雌，所有子組件
- $root 根實例
這三個掛載在this上，不提倡使用斩个。建議使用props組件間傳遞數據胯杭。
自定義事件
父組件中通過 v-on 綁定一個自定義事件 nodeClick，treeNodeClick 為父組件中的一個方法受啥。
<el-card style="min-height:400px;">
<regionTree v-bind:showCheckBox="false" v-bind:showLeaf="false" v-on:nodeClick='treeNodeClick'></regionTree>
</el-card>
子組件中
組件定義 el-tree 樹形控件 有node-click事件做个，賦值成 nodeClick
當用戶點擊節(jié)點時 會觸發(fā)node-click事件， this.$emit('nodeClick', nodeData);
會觸發(fā)自定義事件'nodeClick'.滚局。從而調用父組件中的 treeNodeClick方法居暖。
<el-tree :load="loadNode" lazy
@node-click="nodeClick"
:show-checkbox = "showCheckBox" node-key="id" ref="regionTree">
</el-tree>
方法定義
methods: {
nodeClick(nodeData) {
this.$emit('nodeClick', nodeData);
},
}
這樣組件間 的通訊基本完成，數據交互 可以通過props核畴，事件交互可以通過 自定義事件完成膝但。
