使用.sync修饰符

使用.sync修饰符

这篇文章我们来学习上.sync修饰符的简洁用法。首先准备一个Input组件

<template>
<div>
  <el-input
    v-model="modelValue"
    :placeholder="placeholder"
    @input="input"
  ></el-input>
   <el-button @click="changeText">点击修改</el-button>
</div>
</template>

<script>

export default {
  name: "Input",
  props: {
    input: Function,
    placeholder:String
  },
  methods:{
    // 子组件向外派发一个事件，父组件监听事件
    changeText(){
      this.$emit('update:placeholder','新标题')
    }
  }
};
</script>

我们需要的是在父组件设置子组件的值 并且修改

现在开始编写我们的父组件，将 Input 组件引入到父组件内

<template>
  <div>
    <Input 
    :placeholder="textobj.placeholder"
    @update:placeholder="textobj.placeholder = $event"
    ></Input>
  </div>
</template>

<script>
import Input from "@/input.vue"
export default {
  components:{
    Input
  },
  data(){
    return{
      textobj:{
        placeholder:"小象"
      }
    }
  }
}
</script>

在子组件里 我们编写了 一个 changeText事件用来更新 父组件里的 placeholder 值，所以在父组件里 我们需要接收到改变的值

 @update:placeholder="textobj.placeholder = $event"

注：如果这里有很多值，即每一个变量需要写两句语句，这时候我们可以使用.sync优化

<TestInput v-bind.sync="textobj"></TestInput>

一句话即可，子组件里无需修改 ，也可以达到一样的效果
有何指点，欢迎提出建议！