v-model

v-model

input的双向数据绑定

在input中使用v-model实现双向数据绑定

v-model 是动态属性绑定 v-bind 与 input事件的语法糖

  <input type="text" v-model="iptValue" />

下面的写法和上面是一样的：监听输入框的input事件，视图变化通知修改实例中的值；由于v-bind绑定了属性，当实例中的值改变，input中绑定的值也会变化

<input type="text" :value="iptValue" @input="iptChange" />
<div>展示一下iptValue的变化情况：{{ iptValue }}</div>
<button @click="modifyIptValue">修改input中的值</button>
  data() {
    return {
      iptValue: ''
    }
  },

  methods: {
    iptChange(e) {
      this.iptValue = e.target.value
    },
    modifyIptValue() {
      this.iptValue = '手动修改了input的value'
    },
  }

这种基本使用在vue2和vue3中使用是一样的

vue2中父子组件的双向数据绑定

简单的父子双向数据绑定

vue中父组件传给子组件的是单项数据流，一般情况下不让我们在子组件中修改父组件中的变量

当然我们可以通过属性绑定和$emit、 $on，this.$parent.key=value等来实现通信；v-model只是其中一种方式.

如果父组件给子组件的值既需要使用，而且还要修改；我们就可以使用v-model简化props/v-bind和 emit与on

1》父组件：将需要双向绑定的属性值用v-model绑定

    <modelChild v-model="num" />
    <button @click="changeNum">父组件来修改</button>
    
     methods: {
        modifyNum() {
          this.num=88
        }
     }

2》子组件：通过model属性说明双向绑定的是那个属性，触发修改的事件是什么；当我们修改时，只需通过this.$emit将值传过去

<template>
  <div class="child">
    <div>子组件接收：{{ num }}</div>
    <button @click="modifyNum">修改num</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'num',
    event: 'change'
  },
  props: {
    num: {
      type: Number,
    }
  },
  methods: {
    modifyNum() {
      this.$emit('change', Math.random())
    }
  }
}
</script>

.sync修饰符的使用

当我们需要同时实现多个属性的双向绑定，此时我们就可以使用.sync修饰符，搭档v-bind

父组件：

    <modelChild :str.sync="str" :num.sync="num" />

子组件：$emit传递的是：update:propName，而且不需要model属性了，这里与v-model有点不一样；

    <div>子组件接收：{{ num }}---{{ str }}</div>
    <button @click="modifyNum">修改num</button>
    <button @click="modifyStr">修改字符串</button>

  props: {
    num: {
      type: Number
    },
    str: {
      type: String
    }
  },

  methods: {
    modifyNum() {
      this.$emit('update:num', Math.random())
    },
    modifyStr() {
      this.$emit('update:str', '修改后的str')
    }
  }

vue3中v-model

基本使用还是和vue2中一样；

不过vue3中不再使用.sync了；将 .sync和 v-model功能合并,如果想实现子组件与父组件的双向数据绑定

父组件：使用v-model:propName 绑定

<template>
  <div>
    <h1>父组件{{ num }}--{{ str }}</h1>
    <button @click="changeNumStr">父组件修改</button>
    <TestChildren v-model:num="num" v-model:str="str" />
  </div>
</template>

<script>
import { defineComponent, ref, defineAsyncComponent } from 'vue'
export default defineComponent({
  components: {
    TestChildren: defineAsyncComponent(() =>
      import('./components/testChild.vue')
    ),
  },
  setup() {
    let num = ref(0)
    let str = ref('hello')
    function changeNumStr() {
      num.value--
      str.value = '父组件修改后的str'
    }
    return {
      num,
      str,
      changeNumStr,
    }
  },
})
</script>

子组件：props接收传递过来的属性，props通过 context.emit(‘update:propName’,value)来修改

<template>
  <div>{{ num }}----{{ str }}</div>
  <button @click="changeNum(999)">修改num</button>
  <button @click="changeStr('子组件修后的str')">修改str</button>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
  props: {
    num: {
      type: Number,
      default: 0,
    },
    str: {
      type: String,
      default: '',
    },
  },
  setup(props, context) {
    function changeStr(newStr) {
      context.emit('update:str', newStr)
    }
    function changeNum(val) {
      context.emit('update:num', val)
    }
    return { ...toRefs(props), changeStr, changeNum }
  },
})
</script>