zoukankan      html  css  js  c++  java
  • Vue在使用组件中的一些需要记住的点

    1.这样的写法会因为HTML的规则tbody里只能有tr,td标签而解析错误

    正确的写法如下:

    同理select下也只能有option,ul里只能有li,要使用组件也可以使用类似的方法

    2.子组件需要绑定数据情况需要把数据作为一个函数返回

    会报错:

    正确写法:

    3.使用ref可以获取到VUE实例下面的DOM元素

    组件通过emit向父组件传递数据,父组件通过$refs获取到子组件下面的值,具体实例如下:

    接下来来几个传值的案例:

    父组件通过属性的形式向子组件传值:

    父子间可以向父组件传递参数,子组件则不可以修改父组件传递过来的值,以上DEMO虽然能实现累加效果,但是会报错

    因为这是一个单向数据流,传递过来的数据如果是一个引用类型的数据,子组件修改数据的话会影响其他组件

    具体解决方法如下(子组件拷贝一份父组件值的副本):

     

    子组件通过事件的形式向父组件传递:

    给组件绑定原生事件

     

    通过native修饰符

    复杂情况非父子组件传值:比如下图,13之间的传值,33之间的传值

    解决这种复杂传值的方式可以使用vuex,或者发布订阅者模式(观察者模式)来解决非父子组件之间传值

    以下就是使用订阅者模式来解决

    在组件内使用插槽:

    具名插槽

    作用域插槽

     

     动态组件:

  • 相关阅读:
    如何解除任务管理器被禁用
    一、JavaScript概述
    001_html基本结构
    postman常见问题记录
    fidder工具使用
    SonarQube工具使用问题汇总
    业余书籍读后感
    jmater常见问题处理
    测试知识记录(更新中)
    HTTP协议
  • 原文地址:https://www.cnblogs.com/rmty/p/10991490.html
Copyright © 2011-2022 走看看