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>