Vue2 sync 修饰符

sync 修饰符

sync就是一个语法糖，其实还是使用了父子组件传值和方法

  <v-children :zjq.sync="zjq"></v-children>
  //等同于
   <v-children v-bind:zjq="zjq" v-on:update:zjq="e =>zjq=e"></v-children>

所以在子组件中触发 update:zjq 这个父传子的方法即可
父组件

<template >
  <div class="container">
    {
   {
   zjq}}
    <v-children :zjq.sync="zjq"></v-children>    
 <!-- <v-children v-bind:zjq="zjq" v-on:update:zjq="e =>zjq=e"></v-children> -->
  </div>
</template>
<script>
import vChildren from "../components/children/children";
export default {
   
  components: {
    vChildren },
  data() {
   
    return {
   
      zjq:"我是zjq"
    };
  },
};
</script>
<style  scoped>
</style>

子组件

<template >
  <div class="container">
    <p>我是children组件1</p>
    <input type="text" v-model="channgezjq" @input="$emit('update:zjq',$event.target.value)" />
  </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
      channgezjq: this.zjq
    };
  },
  props: [ "zjq"],
};
</script>
<style  scoped>
.container {
   
  width: 300px;
  height: 150px;
  border: 2px solid yellow;
  margin: 10px auto;
}
</style>

.sync v-model
实现父子传值的核心：自定义属性 方法