美文网首页Vue.jsH5前端技术分享前端Vue专辑
Vue.js中异常高效可用的.sync修饰符

Vue.js中异常高效可用的.sync修饰符

作者: 胡哥有话说 | 来源:发表于2019-06-26 19:13 被阅读3次

    前言

    在Vue.js中,父子组件进行数据通信是一个老生常谈的话题,父级组件通过Prop向子组件传递数据,而子组件如何向父级组件进行数据交流沟通呢?

    一、父子组件数据交互 - 第一种方式

    业务需求:

    子组件展示父组件传递的数值num,点击子组件中的+号按钮,改变父组件num的值


    页面效果展示

    定义子组件

    // Num.vue
    <template>
      <div class="num">
        <h3>子组件</h3>
        <button @click="plus">+</button>
        <h3>子组件:{{ num }}</h3>
      </div>
    </template>
    <script>
    export default {
      name: 'Num',
      props: {
        num: {
          type: Number,
          required: true
        }
      },
      methods: {
        /**
         * 子组件是无法直接修改this.num,也无法直接修改父级组件的num
         * 子组件$emit触发特定事件,父级组件监听对应事件,处理num
        */
        plus () {
          let num = this.$props.num
          this.$emit('updateNum', ++num)
        }
      }
    }
    </script>
    

    定义父组件

    // Index.vue
    <template>
        <div class="index">
          <h3>父组件:{{ num }}</h3>
          <hr>
          <num :num="num" @updateNum="updateNum"></num>
        </div>
    </template>
    <script>
    import Num from './Num'
    export default {
      name: 'Index',
      data () {
        return {
          num: 1
        }
      },
      components: {
        Num
      },
      methods: {
        // 更新num,传递到子组件的数据发生更新
        updateNum (num) {
          this.num = num
        }
      }
    }
    </script>
    

    小结

    使用以上方式进行父子组件通信是Vue.js的标配:父组件通过prop向子组件传递数据,子组件使用$emit触发特定的事件updateNum,父组件监听特定的事件updateNum,进而更新父组件数据。功能确实实现了,但是在部分情况下不是那么完美

    缺点: 考虑到Num.vue以后可能被多个组件复用,那么每个父组件中都需要监听处理updateNum事件,这样的话,对于父组件提升了其复杂性,对于子组件降低了其功能的独立性。

    二、父子组件数据交互 - 第二种方式

    完美解决方案:.sync修饰符

    Vue.js本身就考虑到这种情况,提供了使用.sync修饰符,以实现更加便捷的从子组件更新父组件数据。

    父子组件都要进行特定的配置

    子组件

    在原有的Num.vue中,需要修改以下位置代码:

    // Num.vue
    methods: {
        plus () {
            let num = this.props.num
            // 注意:此处触发的update:xxx事件,是特定的事件名称,xxx对应的是父组件中对应的变量num
            this.$emit('update:num', ++num)
        }
    }
    

    父组件

    在原有的父组件Index.vue中,需要修改以下位置的代码:

    // Index.vue
    <template>
        <!-- 其他代码 -->
        <!--
            调用Num组件,并传递num,此处一定要添加.sync修饰符
            同时不用再监听任何其他事件
            同时methods中添加的updateNum方法删除即可
        -->
        <num :num.sync="num"></num>
    </template>
    

    现在就实现了第一种方式中的相同功能!手动 微笑.gif

    小结

    其实.sync修饰符是相同于Vue.js自动帮你在Index.vue中的num组件调用上监听了update:num事件,并将传递的新值赋值到了变量num上,实现了子组件更新父组件的变量,进行了数据通信。

    思维拓展

    在很多的第三方框架中,如element-ui,都使用了.sync修饰符的功能。比如Dialog对话框组件,调用时也是使用.sync方式传递变量visible的值,子组件Dialog在执行关闭对话框时,就执行了this.$emit('update:visible', false)(详情可自行查看elemnt-ui源码)

    后记

    以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏、转发、点击在看呦,欢迎多多留言交流...

    胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!

    长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!

    胡哥有话说

    相关文章

      网友评论

        本文标题:Vue.js中异常高效可用的.sync修饰符

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