vue学习

作者: yuan1024 | 来源:发表于2018-04-03 21:10 被阅读5次

    vue中的事件传递

    父子组件传值
    通过props传递,父组件 :name=“name(父数据)”
    子组件 props内引入 name
    组件内使用this.name 就可以访问数据了。
    若子组件需要改变父组件的值,需在子组件内data重新定义(父元素值通过this.name赋值)

    子组件向父组件传值
    子组件使用$emit('event',data) -----event为自定义事件
    父组件接受数据 @('event',事件处理) ---在事件处理函数内便可以拿到子组件传递的值

    兄弟组件传值 - 需通过一个空的实例 new vue()
    兄弟之间通过bus.$emit()和bus.$on()--(获取数据,数据在create里)

    vue内blur事件和click事件冲突

    click事件改为mousedown事件,事件在blur之前处理。

    watch的使用

    watch: {  
        shuju(newValue, oldValue) {  
            console.log(newValue)  
        }  
    }  
    
    arr: { 
       handler(newValue, oldValue) {  
        for (let i = 0; i < newValue.length; i++) {  
          if (oldValue[i] != newValue[i]) {  
            console.log(newValue)  
          }  
        }  
      },  
      deep: true  
    }  
    
    obj: {  
      handler(newValue, oldValue) {  
        console.log(newValue)  
     },  
     deep: true  
    }  
    
    //obj具体属性
    computed: {  
      key() {  
        return this.obj.key
      }  
    },  
    watch: {  
      key(newValue, oldValue) {  
        console.log(newValue)  
      }  
    } 
    

    监听数据变化

    $nextTick

    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    ref的使用方法

    vue中获取真实的DOM节点
    在html内或者组件内可以定义ref=“name”,获取时通过this.$refs.name

    相关文章

      网友评论

          本文标题:vue学习

          本文链接:https://www.haomeiwen.com/subject/xtnchftx.html