zoukankan      html  css  js  c++  java
  • vue中组件之间的传值

    按照对象分类:

    一、父子组件之间的传值

    1.使用props和$emit

    2.在引入的子组件中使用ref,通过this.$refs.xxx.方法/值来获取子组件中的方法或者值

    3.子组件中使用this.$parent来获取父组件中的值或者方法

    4.父组件中使用this.$children来获取子组件中的值或者方法

    tip:方法3和方法4有时候会失效,所以建议使用方法2

    二、兄弟组件中的传值

    1.使用eventBus作为中间件,然后使用$emit去抛出事件,使用$on去监听事件

    这里要注意一些事项:a.bus.$emit在beforeDestroy中去触发

    b.bus.$on 在 created或者mounted中使用,且回调函数使用箭头函数,解决this指向问题

    c.在beforeDestroy中使用bus.$off去销毁事件

    d.比较特殊的是如果该组件存在缓存(路由跳转的时候使用了<keep-alive>来包裹<router-view>,此时该组件跳转的时候是不会触发beforeDestroy和destroy,该组件只会触发created和mounted,但是它又离去的时候会触发deactivated,返回的时候会触发active,此时就将bus.$emit写在deactivated中)

    tip:我在网上还看到如果是这种情况的话也可以将bus.$emit写在$nextTick里面去触发,尝试过,结果失败。这里只是当做一个参考。

    详细参考点击链接

    三、多级组件嵌套传值

    1.使用 v-bind = "$attrs" v-on = "$listeners"

    详情参考点击链接

    2.使用provide和inject

    四、多个组件重复使用,整个项目都需要的

    1.使用vuex

     

  • 相关阅读:
    Scribes:简单而智能的文本编辑器
    [Java 12 IO] IO 总结
    [Java 12 IO] Serializable 初步 ObjectOutputStream ObjectInputStream 将序列化的对象打出来
    IOS数据解析之XML
    IOS数据解析之JSON
    IOS网络请求类(NSURLCollection)
    IOS之多线程
    IOS开发常见注意点
    IOS常用封装总结
    UIScrollView 的常用属性和方法
  • 原文地址:https://www.cnblogs.com/lanhuo666/p/11273128.html
Copyright © 2011-2022 走看看