vue 組件要記

1. 使用組件時 ，使用 【v-model】 完成雙向綁定

①組件中要定義一個【value】值，也就是 props中有定義一個【value】屬性，即傳值

②在有新的value 時觸發 input 事件，即寫值 。

2.使用組件時， 添加【ref 】屬性，來指定一個索引名稱

① 能夠使用 this.$refs.索引名

②$refs 只在組件渲染完成後才填充，而且它是非響應式的，它僅僅做爲一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用$refs

3.遞歸組件

在組件定義的時候，設置【name】後，就能夠在組件模板內使用了，不過須要注意的是，必須給一個條件來限制遞歸的數量，不然會拋出錯誤：max stack size exceeded.

4. 內聯模板

使用組件時，給組件標籤使用【 inline-template】 特性，組件就會把它的內容看成模板，而不是把它當內容分發。若是不是很是特殊的場景，建設不要輕易使用

5.動態組件

vue.js 提供了一個特殊的元素<component> 用來動態地掛載不一樣的組件，使用is 特性一選擇要掛載的組件

<div>
   <component :is="currentView"></component>
</div>
<script >
	new Vue({
		components:{
			comA:{  //組件1
				template:'<div>aaa</div>'
			},
			comB:{  //組件2
				template:'<div>bbb</div>'
			}
		}
		data:{
			currentView:'comA'  //選擇了組件 comA
		}
	})
</script>

6. $nextTick

   若是咱們改變 數據，致視圖發生了變化。這個過程當中Vue使用的是【異步更新隊列】，即數據的修改，與視圖的變化是異步的。Vue 在觀察到數據變化時並非直接更新DOM，而是開戶一個隊列，並緩衝在同一事件循環中發生全部數據改變。在緩衝時會去除重複數據，從而避免沒必要要的計算和DOM操做。
   $nextTick就是用來知道何時DOM更新完成的。若是咱們使用popper.js 或 swiper 等可能要獲取 DOM

<div>
   <div id="content" v-if="show"></div>
</div>
<script >
	new Vue({
		data:{
			show:false  
		},
		methods:{
			myEvent:function(){
				this.show = true;
				this.$nextTick(function(){
					document.getElementById('div');		//若是沒有放在 $nextTick 那麼是獲取不到的
				});
			}
		}
	})
</script>

7. 手動掛載實例 Vue.extend 和 $mount

Vue 提供了Vue.extend 和 $mount 兩個方法來手動掛載一個實例

<div id="app"></div>
<script >
	//例1：
	new Vue().$mount('app');

	//例2：
   let myExtend =  Vue.extend({
    	template:'...',
    	data:{}
    });

   new myExtend().$mount('app')

   //例3：
   let component =   new myExtend().$mount();
   document.getElementById("app").appendChild(component.$el);
</script>