vue之.sync修饰符-蒲公英云

vue之.sync修饰符

怼烎@ 2023-06-09 13:27 77阅读 0赞

根据VUE官方文档所述，.sync修饰符用来prop双向绑定，而.sync修饰符类似v-model，只是一个语法糖
在这里插入图片描述
先看下放代码，看一下用法，实现了prop的双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-sync</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-input :show.sync='checked'></my-input>
    <div>{ { checked}}</div>
  </div>
</body>
<script>
  Vue.component('my-input', { 
    props: ['show'],
    template: `<div><button @click='add'>加1</button></div>`,
    data() { 
      return { 
        value: this.show
      }
    },
    methods: { 
      add() { 
        this.$emit('update:show', ++this.value);
      }
    }
  })
  var vm = new Vue({ 
    el: '#app',
    data: { 
      checked: 0
    },
    watch: { 
      checked(newVal, oldVal) { 
        console.log(this.checked)
      }
    }
  })
</script>
</html>

为什么要这么写，是因为父组件传值给子组件，子组件不能改变父组件传递过来的值，这也是上述代码中要在子组件定义一个value，用来承接父组件传递过来的值的原因。而不用.sync修饰符的话要改变父组件的值，那么就要在父组件使用方法改变，如下方代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-sync</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-input :show='checked' @update-value='changeChecked'></my-input>
    <div>{ { checked}}</div>
  </div>
</body>
<script>
  Vue.component('my-input', { 
    props: ['show'],
    template: `<div><button @click='add'>加1</button></div>`,
    data() { 
      return { 
        value: this.show
      }
    },
    methods: { 
      add() { 
        this.$emit('update-value', ++this.value)
      }
    }
  })
  var vm = new Vue({ 
    el: '#app',
    data: { 
      checked: 0
    },
    methods: { 
      changeChecked(val) { 
        this.checked = val
      }
    },
    watch: { 
      checked(newVal, oldVal) { 
        console.log(this.checked)
      }
    }
  })
</script>
</html>

两者相比较就可以看出差别，所以开头说.sync只是一个类似v-model的语法糖。

注意事项：

1）.注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。这是官方文档所述，就是说sync后面不能跟表达式
2）.sync还有一个用法,也算简写

<text-document v-bind.sync="doc"></text-document> 
// doc是一个对象，例如 doc:{name:'sads',age:21} 等价于下方
<text-document v-bind:name.sync="doc.name" v-bind:age.sync="doc.age"></text-document>