Vue 中的组件
VUE中的組件
一個自定義的標簽，vue就會把他看成一個組件，vue可以給這些標簽賦予一定意義；一個頁面就是一個組件?
好處：
- 1、提高開發效率
- 2、方便重復使用
- 3、便于協同開發
- 4、更容易被管理和維護
自定義標簽的書寫規范：?
1、組件名不支持大寫字母（首字母可支持大寫）
?2、html中采用多個單詞用-隔開命名法，js中轉換為對應的駝峰命名法
注意：組件中的動態數據data數據必須是函數數據類型的，返回一個實例作為組件的數據。這樣做是為了防止子組件之間公用數據導致的同時更新；（下面局部組件中有案例）
全局組件
用法：聲明一次可以在任何地方使用
//必須要先用component賦予自定義標簽意義，然后再初始化實例 Vue.component('my-hand',{template:'<div>{{msg}}</div>',data(){return {msg:'我很英俊'}} }); let vm=new Vue({el:'#app' }) //頁面中使用<div id="app"><my-hand></my-hand></div>局部組件
用法：必須告訴這個組件屬于誰，組件之間是相互獨立的，不能直接跨作用域，vue的實例也是一個組件，擁有生命周期函數，理論上可以無限嵌套?
1、創建局部組件（js）?
2、注冊這個組件（js）?
3、在HTML中使用這個組件?
注意事項：?
1、子組件不能直接使用父組件的數據?
2、組件理論上可以無限嵌套?
3、子組件之間如果共用了數據，而且不把data寫為返回一個對象的形式，會導致同時更新；
子組件之間公用數據導致的同時更新的問題；
let obj={school:'zfpx'};let component1 = {template: `<div @click="school='hello'">組件一{{school}}</div>`,data(){return obj;//此種寫法是錯誤的，點擊組件一的時候會導致obj的數據更新，結果也會反映到組件二上}};let component2 = {template: '<div>組件二{{school}}</div>',data(){return obj;}};let vm=new Vue({el:'#app',components:{component1,component2}})//頁面中使用<div id="app"><component1></component1><component2></component2></div>?
子組件與父組件之間的數據傳遞和嵌套
嵌套
//創建局部組件，相當于給grandson這個標簽賦予了實際的意義 //一定要先創建最內層的組件（即孫子）let grandson={template:'<div>{{msg}}</div>',data(){return {msg:'我是孫子'}}};let son={template:'<div>{{msg}}<grandson></grandson></div>',data(){return{msg:'我是兒子'}},components:{//在兒子中嵌套孫子組件//在son的components中注冊了孫子組件后，才可在son的模版中使用grandson標簽（但是依然不能在頁面中使用son標簽）grandson}};let parent={template:'<div>{{msg}}<son></son></div>',data(){return{msg:'我是父親'}},components:{son}};let vm=new Vue({el:'#app',components:{//在vue的實例中注冊了parent組件之后才能在頁面中使用parent標簽parent}})//在頁面中使用局部組件<div id="app"><parent></parent></div>數據傳遞
父傳遞給子
可以通過給子組件設置自定義屬性的方式拿到父組件的屬性值，子組件用props方法來獲取到自定義屬性的值就可以直接在子組件的模版中使用了；
let vm=new Vue({el:'#app',data:{msg:100},components:{child:{//props屬性寫成數組的形式不能進行校驗props:['m'],//相當于取到子組件自定義的m屬性，值是父親的//寫成對象的形式可以校驗其值的類型props:{m:{//校驗類型拿到的值是否屬于下面的類型，不屬于也會進行渲染，控制臺會提示類型錯誤type:[Number,String,Function,Object,Array],default:0//如果子組件沒有m屬性，則m值默認取0//如果m屬性是必須的，則可增加required:true(不可與default同用)required:true},},template:'<div>兒子{{m}}</div>'//這里就可以直接用m}}})//在頁面中使用局部組件<div id="app">父親：{{msg}} <!--m屬于子組件的自定義的屬性，前面加了:之后,m的值就變為動態的了-><child :m="msg"></child>//msg：拿到的是父的數據</div>子傳遞給父
為了防止子組件無意間修改了父組件的狀態，props采用的是單向綁定。所以子組件傳遞給父組件數據就不能通過設置自定義屬性的方法，而要通過發布訂閱模式來傳遞；
let vm=new Vue({el:'#app',data:{money:400},methods:{things(val){//val：兒子觸發事件時傳過來的數據this.money=val;}},components:{child:{props:['m'],//給兒子的按鈕添加點擊事件，當點擊的時候觸發發布訂閱模式，執行綁定在子組件上的事件template:'<div>兒子{{m}} <button @click="getMoney()">多要錢</button></div>',methods:{getMoney(){//此處的this指的是子組件的實例//觸發自定義事件（child），讓父親的方法（things）執行this.$emit('child',800);}}}}});//在頁面中使用子組件<div id="app">父親：{{money}}<child :m="money" @child="things"></child></div>組件中的插槽（slot標簽）
slot標簽的作用：定制模版?
slot相當于一個插槽，可以把組件中的對應標簽拿到之后替換自己里面的內容?
slot中可以放一些默認的內容，如果組件中對應slot值的標簽有內容則會被替換掉，如果沒有則會使用slot中的默認內容
如何在父組件中調用子組件中的方法
通過給子組件設置ref值為xxx，在父組件中可通過this.$refs.xxx找到對應ref值的子組件的vue對象。（子組件的方法也掛載到了它的vue對象上）?
由于在mounted執行時，子組件的DOM結構才加載完成，所以只有在mounted函數中才能用this.$refs.xxx.$el拿到對應子組件的DOM元素;
動態組件
component標簽?
通過使用component標簽，我們可以讓多個組件使用同一個掛載點，并根據component內置的is屬性來實現動態切換（is屬性可以理解為是哪一個組件）；
keep-alive標簽?
如果想把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。可以把需要緩存的標簽外面包一個 keep-alive 標簽
$nextTick的用法
子組件和父組件都有mounted方法時，會先執行子組件的mounted方法：因為要保證子組件掛載完成再觸發父組件的掛載
let vm=new Vue({el:'#app',mounted(){//想操作最新的DOM，就需要用$nextTick方法（異步的來獲取）//未加$nextTick方法，獲取的不是最新的DOMconsole.log(this.$refs.child.$el.innerHTML);//結果為1，2，3//為了保證操作的是最新的DOM，則需要用$nextTick方法this.$nextTick(()=>{console.log(this.$refs.child.$el.innerHTML);//4,5,6(獲取到的是最新的結果)})},components:{child:{data(){return {arr:[1,2,3]}},template:'<div><li v-for="a in arr">{{a}}</li></div>',mounted(){//先執行子組件的mounted方法之后再同步執行父組件的mounted方法this.arr=[4,5,6]//此步驟涉及到DOM渲染，所以說是異步的，而執行父組件的mounted方法時，此步驟還未實現}}}})//html<div id="app"><child ref="child"></child></div>同級組件之間的數據傳遞通過EventBus（不用，但要了解）
為了保證訂閱和執行的是同一個對象，需要借助第三方實例，通過第三方實例實現發布訂閱?
EventBus就是用來創建第三方實例的，可用來保證訂閱和執行的時候是同一個對象
轉載于:https://www.cnblogs.com/webspace/p/8619679.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： python web开发-flask中r
- 下一篇： mysql 查询优化