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 handsome={template:'<div>{{msg}}</div>',//組件中的data必須是函數類型的，返回一個值作為組件的數據data(){return {msg:'我很英俊'}}};let handsome1={template:'<div>{{msg}}</div>',data(){return {msg:'我是在外部創建的局部組件'}}};let vm=new Vue({el:'#app',components:{//在components中注冊局部組件handsome：handsome，handsome1：handsome1//在ES6中屬性名和值相同可只寫一個（上面的可簡寫為如下的形式）handsome，handsome1，//也可直接在components中直接創建和注冊子組件handsome2:{template:'<div>{{msg}}</div>',data(){return {msg:'我是在components中創建和注冊的局部組件'}}}}})//在頁面中使用局部組件<div id="app"><handsome></handsome><handsome1></handsome1><handsome2></handsome2></div>

子組件之間公用數據導致的同時更新的問題；

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中的默認內容

//jslet model={template:'#model'};let vm=new Vue({el:'#app',data:{msg:'zf'}methods:{fn(){alert('是')}},components:{model}}) //html<div id="app"> <!--這里放的內容均屬于父級模版的(如fn方法)，所以必須在父模版的methods中寫fn方法。msg屬性也是父模版的。只有自定義的屬性名是屬于組件的(如m屬性)--><model :m="msg"> <!--下面標簽中的slot值與template中的slot是對應的，沒有slot值的都會被放到default中--><a href="www.baidu.com">百度一下</a><p slot="content">確認刪除？</p><h1 slot="title" @click="fn">是否刪除？</h1><a href="www.baidu.com">百度一下</a></model></div><!--模版中只能有一個根元素--><!--slot作用，定制模版--><!--slot相當于一個插槽，可以把組件中的對應標簽拿到之后替換自己的內容--><!--如果組件中沒有標簽，則使用slot中默認的內容--><template id="model"><div><slot name="title">默認標題</slot><slot name="content">默認內容</slot><slot name="default">這是一個默認標題</slot></div></template>

如何在父組件中調用子組件中的方法

通過給子組件設置ref值為xxx，在父組件中可通過this.$refs.xxx找到對應ref值的子組件的vue對象。（子組件的方法也掛載到了它的vue對象上）?
由于在mounted執行時，子組件的DOM結構才加載完成，所以只有在mounted函數中才能用this.$refs.xxx.$el拿到對應子組件的DOM元素;

let loading={data(){return{flag:true}},template:'<div>正在加載中……</div>',//子組件的方法methods:{hide(){//此方法中的this是子組件的vue對象//hide執行的時候會把子組件的DOM元素背景色改為紅色this.$el.style.background='red';}},}; let vm=new Vue({el:'#app',mounted(){//在此處實現父組件調用子組件的方法//此處的this是vm，this.$refs獲取的不是子組件的DOM而是vue對象；// 可用this.$refs.load.$el來獲取對應的DOM結構;this.$refs.load.hide();},components:{loading}})//Html<div id="app"><loading ref="load"></loading></div>

動態組件

component標簽?
通過使用component標簽，我們可以讓多個組件使用同一個掛載點，并根據component內置的is屬性來實現動態切換（is屬性可以理解為是哪一個組件）；

let home={template:'<div>home</div>', //如果放在了keep-alive標簽中，則可以保留它的狀態來避免以后點擊重新渲染。只在第一次渲染的時候會彈出1mounted(){alert(1)}};let list={template:'<div>list</div>',//如果放在了keep-alive標簽中，則只在第一次點擊的時候彈出2mounted(){alert(2)}};let vm=new Vue({el:'#app',data:{radio:'home'},components:{home,list}})//html<div id="app"><input type="radio" v-model="radio" value="home">home<input type="radio" v-model="radio" value="list">list<!--keep-alive標簽一般用來緩存：現在講是為了后面的路由做準備，如果緩存了，只會走beforeUpdate與之后的階段--><keep-alive><component :is="radio"></component></keep-alive></div>

keep-alive標簽?
如果想把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。可以把需要緩存的標簽外面包一個 keep-alive 標簽

<keep-alive><component :is="radio"></component></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年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue 中的组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。