• “两学一做”在山西——黄河新闻网 2019-07-13
  • 内地生报读香港高校本科人数持续下跌 2019-07-13
  • 【学习时刻】人民大学王义桅:金砖合作的“自信”与“自觉” 2019-07-12
  • 女子请“私家侦探”被骗3万 警方循线捣毁诈骗团伙 2019-07-11
  • 【学习时刻】北交大马院院长韩振峰:高校思想政治工作必须牢牢把握三大根本问题 2019-07-11
  • 全国“非遗”保护工作先进名单公布 2019-07-01
  • 紫光阁中共中央国家机关工作委员会 2019-06-25
  • 杭州控烟令修改草案拟允许室内设吸烟区,控烟专家:跌破眼镜 2019-06-25
  • 挪用近30万报纸征订款赌博 河南一报社聘用制干部获刑 2019-06-23
  • 2016年,有1145家上市公司大小非减持了3600亿元,还有210名上市公司高管减持了1400亿元。IPO已成了造就成千上万个十亿、百亿富豪的捷径, 2019-06-21
  • 专家“把脉”中国电影市场:提升品质方能逆袭 2019-06-21
  • “善款资助副局长儿子留学”真相须尽快落地 2019-06-19
  • 21岁女护士失联2天后确认遇害 嫌疑人为其前男友 2019-06-19
  • 中国地质公园名录旅行地中国国家地理网 2019-06-13
  • 玄关运用有四大原则 用的好才能财旺挡煞聚财 ——凤凰网房产 2019-06-10
  • 浅入深出Vue:子组件与数据传递

    广东十一选5一定牛 www.aavbg.com 上一篇了解了组件的概念及在使用中需要注意的地方。在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题。那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题。

    如何传递

    父组件向子组件在进行传递时,使用的是 prop特性进行传递。

    约定

    老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件:

    1. 子组件的 props中定义要传递的变量名

    2. 变量名同组件的命名规范

    3. 父组件传值时,需要使用短横线分隔命名

    4. 使用 v-bind进行传值

    定义

    首先在子组件中定义:

    // Child.vue
    
    export default {
        name: 'child'
        props: ['teamList']
    }

    这里使用了驼峰命名,在传值时需注意要转换成短横线分隔命名。

    我们定义了一个 teamList的变量,此时我们就可以在这个组件中通过 this使用这个变量了(同 data中的数据)。

    传值

    在父组件中进行传值:

    <template>
        <div>
            <child v-bind:teamList="teamList"></child>
        </div>
    </template>

    父组件中使用 v-bind即可将数据传递下去了。

    向子组件传递数据就是这么简单,本质上和 data一样,只是这里单独使用 prop特性将其区分开来。

    需要注意的时:

    • 通过 prop特性传递下去的数组是 “单向”绑定的,父组件对数组的更新会影响到子组件。因此并不建议子组件对 prop特性中的值进行修改

    Js中在传递对象和数组时传递的时引用!因此:当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态

    这个特性有利有弊,在某些情况下可以通过这种类似 hack的方式来进行处理。

    子组件反向传递

    上面说到了,并不建议在子组件中修改 props中的数据。那么当需要向父组件进行某种反馈时怎么办呢?

    假设现在我们有一个登录弹出框的组件,通过子组件的方式调用了,当我们登录成功时该如何通知父组件做出相应的反应呢?

    1. 通过自定义事件,子组件调用 this.$emit('事件名', 参数)

    2. 使用 v-model 、组件中 model选项与 input事件模拟成 input控件,对父组件中的值进行更新

    3. .sync修饰符进行 “双向绑定”

    这里只介绍第一种方式,因为后两种方式若羽也没用过几次 o(╯□╰)o

    emit使用约定

    • 事件名的命名规范同组件

    • 父组件在绑定子组件上的自定义事件时,必须完全匹配事件名,这里不像组件与子组件中使用时是使用的短横线分隔命名,而是完全匹配。

    约定较少,主要注意使用时是和组件不同的,名称需要完全匹配。

    emit使用

    首先我们在子组件中定义事件,说是定义,不如说是调用。因为是子组件直接在某段逻辑中调用的emit

    // child.vue
    
    export default {
        methods: {
            submit() {
                this.$emit('submitForm', this.data)
            }
        }
    }

    这里我们定义了调用的自定义事件名称为 submitForm,那么在父组件中使用:

    <!-- parent.vue -->
    
    <template>
        <div>
            <child v-on:submitForm="submit"></child>
        </div>
    </template>
    
    <script>
    export default {
        methods: {
            submit(data) {
                // 处理逻辑
            }
        }
    }
    </script>

    可以看到这里在使用时, v-on绑定的事件名称是 submitForm而不是 submit-form。

    这一点需要注意。

    写在后面

    这一篇内容较少,因为接下来的入门篇将会用项目实践来更好的演示它们的用法。同时,初学之时也不太建议在用法多样性上关注太多。

    在实践中学习、成长

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1vu8349ugeh09

    posted @ 2019-07-10 19:22 若羽。 阅读(...) 评论(...) 编辑 收藏
  • “两学一做”在山西——黄河新闻网 2019-07-13
  • 内地生报读香港高校本科人数持续下跌 2019-07-13
  • 【学习时刻】人民大学王义桅:金砖合作的“自信”与“自觉” 2019-07-12
  • 女子请“私家侦探”被骗3万 警方循线捣毁诈骗团伙 2019-07-11
  • 【学习时刻】北交大马院院长韩振峰:高校思想政治工作必须牢牢把握三大根本问题 2019-07-11
  • 全国“非遗”保护工作先进名单公布 2019-07-01
  • 紫光阁中共中央国家机关工作委员会 2019-06-25
  • 杭州控烟令修改草案拟允许室内设吸烟区,控烟专家:跌破眼镜 2019-06-25
  • 挪用近30万报纸征订款赌博 河南一报社聘用制干部获刑 2019-06-23
  • 2016年,有1145家上市公司大小非减持了3600亿元,还有210名上市公司高管减持了1400亿元。IPO已成了造就成千上万个十亿、百亿富豪的捷径, 2019-06-21
  • 专家“把脉”中国电影市场:提升品质方能逆袭 2019-06-21
  • “善款资助副局长儿子留学”真相须尽快落地 2019-06-19
  • 21岁女护士失联2天后确认遇害 嫌疑人为其前男友 2019-06-19
  • 中国地质公园名录旅行地中国国家地理网 2019-06-13
  • 玄关运用有四大原则 用的好才能财旺挡煞聚财 ——凤凰网房产 2019-06-10
  • 江苏11选5一天开多少期 赌场荷官 新疆35选7历史号码 香港赛马会足球博彩 体彩大乐透17139期预测 超级大乐透走势图表2元 香港赛马会图片 201911期双色球开机和预测号码 王中王六肖中特期期 山西快乐10分前三走势 欢乐斗地主残局7月专家 三分彩是正规的吗 娱乐城9月注册送 双色球彩客网推荐 彩票论坛大全