zoukankan      html  css  js  c++  java
  • Understand .sync in Vue

    Preface

    The first time I met .sync modifier, I didn't know it very well. So, I seldom use that. Today, I am going to get it.

    Main

    In the past, I use “two-way binding” like this:

    ```<div class="app" id="app"> <button-counter :child-count="parCount" @add="add"></button-counter> <p>parent component {{parCount}}</p> </div> ```
    
    let app = new Vue({
      el: '#app',
      data: {
        parCount: 0
      },
      methods: {
        add() {
          this.parCount++
        }
      },
      components: {
        'button-counter': {
          template:
            '&lt;button @click="add"&gt;You clicked me {{ childCount }} times.&lt;/button&gt;',
          props: ['childCount'],
          methods: {
            add() {
              this.$emit('add')
            }
          }
        }
      }
    })
    

    It was easy to understand except a little inconvenient. I need to listen and handle event in child and parent component. Also

    true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

    So, Vue recommends emitting events in the pattern of update:myPropName. For example:

    ```<div class="app" id="app"> <button-counter :child-count="parCount" @update:child-count="parCount=$event"></button-counter> <p>parent component {{parCount}}</p> </div> ```
    
    let app = new Vue({
      el: '#app',
      data: {
        parCount: 0
      },
      methods: {},
      components: {
        'button-counter': {
          template:
            '&lt;button @click="add"&gt;You clicked me {{ childCount }} times.&lt;/button&gt;',
          props: ['childCount'],
          methods: {
            add() {
              this.$emit('update:child-count', this.childCount + 1) // child-count is right while childCount won't work
            }
          }
        }
      }
    })
    

    See? In this case, we don't have to add event callback in parent component because vue have done that. And this is the principle of .sync. For convenience, Vue offers a shorthand for this pattern with the .sync modifier which would make the code above like:

    ```<div class="app" id="app"> <button-counter :child-count.sync="parCount"></button-counter> <p>parent component {{parCount}}</p> </div> ```
    
    let app = new Vue({
      el: '#app',
      data: {
        parCount: 0
      },
      methods: {},
      components: {
        'button-counter': {
          template:
            '&lt;button @click="add"&gt;You clicked me {{ childCount }} times.&lt;/button&gt;',
          props: ['childCount'],
          methods: {
            add() {
              this.$emit('update:childCount', this.childCount + 1) // childCount is right while child-count won't work
            }
          }
        }
      }
    })
    

    Also,

    The .sync modifier can also be used with v-bind when using an object to set multiple props at once:

    ```<text-document v-bind.sync="doc"></text-document> ```

    This passes each property in the doc object (e.g. title) as an individual prop, then adds v-on update listeners for each one.

    For more information, go Vue.js

    Original Post

    原文地址:https://segmentfault.com/a/1190000017107941
  • 相关阅读:
    iOS 9.0中UIAlertController的用法
    AFN网络状态的时时监控以及网络的判断、
    IOS中货币高精度要求使用NSDecialNumber、
    各种宏定义
    iOS开发中那些高效常用的宏
    iOS应用日志:开始编写日志组件与异常日志
    UITextField的placeholder文字的位置,颜色等的自定义设置
    iOS
    关于duplicate symbol _main in的解决办法
    ios即时通讯客户端开发之-mac上搭建openfire服务器
  • 原文地址:https://www.cnblogs.com/qixidi/p/10121893.html
Copyright © 2011-2022 走看看