• 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不会销毁组件,吧组价放到内存里,方便下次切换时使用

    工欲善其事,必先利其器
  • 相关阅读:
    Vue2+VueRouter2+webpack 构建项目实战(一):准备工作
    vue+webpack 安装常见插件
    JS与CSS阻止元素被选中及清除选中的方法总结
    IE浏览器的ActiveXObject对象以及FileSystemobject的应用扩展(完成)
    用webpack2.0构建vue2.0超详细精简版
    从淘宝和网易的font-size思考移动端怎样使用rem?
    用CSS开启硬件加速来提高网站性能
    JS实现数组去重方法整理
    [总结]高效的jQuery代码编写技巧
    JS apply的巧妙用法以及扩展到Object.defineProperty的使用
  • 原文地址:https://www.cnblogs.com/ccbest/p/11028692.html
Copyright © 2020-2023  润新知