vue组件常用方法

1.组件里面data必须返回对象,防止与其他组件data冲突

2.如果父组件引用子组件的值或者其他,可以让子组件触发一个事件,this.$emit('事件名','value'),然后再向子组件绑定refDOM操作,给父组件绑定@事件名='方法'

3.使用is 解决H5标签上的bug,如果一个DOM结构里引用了组件例如table里面的tr,把tr封装成组件,不能直接使用,H5特性引起的,可以使用is='组件名'解决.

4.如果在标签里写上:count='1',那么这个1好就是number类型,因为带上:相当于绑定了表达式

5.vue里有单向数据流的概念,就是父组件能向子组件传值,而子组件不能修改父组件传的值,这是因为如果子组件的值是引用数据类型,被其他父组件修改后,所有的父组件引用的子组件的值都将改变,如果子组件非得修改父组件传值,正确的做法是在子组件data里面重新定义一个值和props里面的一致,props是父组件向子组件传值的接收者

6.给组件绑定原生事件,不需要$emit,只需要@click.native

7.兄弟之间的传值可以用vuex也可以用观察者模式,发布订阅模式 Vue.prototype.bus = new Vue() 这样子组件 this.bus.$emit ('事件',value)父组件@事件,...在methods里面监听bus的属性mounted:{()=>{this.bus.$on('事件',(msg)=>{ alert(msg)   }))}} 

8.slot是在子组件定义的,方便父组件插入dom. 也可以使用具名slot,<slot name='header'>父组件引用时<slot='header'>,当然slot也可以有默认值

9.作用域插槽,子组件slot里面的数据父组件需要干预时可以使用作用域插槽,不过要在父组件引用时slot内容外面套上一层template   <template slot-scope = 'props'> props里面就是子组件定义slot里面的数据

10.动态组件vue自带标签<component :is='type'></component> 其中type是组件名

11.v-once ..如果两个组件要不停的切换,组件又是不变的可以使用v-once指令来提高性能,v-once不会销毁组件,吧组价放到内存里,方便下次切换时使用

工欲善其事,必先利其器
原文地址:https://www.cnblogs.com/ccbest/p/11028692.html