v-model :model ref 用法区分

<template>
  <div>
    <input type="text" value="aaa" :model="info" ref="model" />
    <input type="text" value="bbb" v-model="info" ref="vmodel" />
    <input type="text" value="ccc" :zidingyi="info" ref="zidingyi" />
    <el-button @click="clickEvent">点击</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: "ddd",
    };
  },

  mounted() {
    console.log("model:", this.$refs.model.value); // model: aaa
    console.log("v-model:", this.$refs.vmodel.value); //v-model: ddd
    console.log("zidingyi:", this.$refs.zidingyi.value); //zidingyi: ccc
    console.log("info:", this.info); //info: ddd
  },

  methods: {
    clickEvent() {
      console.log("model:", this.$refs.model.value); // model: 输入框输入多少就是多少
      console.log("v-model:", this.$refs.vmodel.value); //v-model: 输入框输入多少就是多少
      console.log("zidingyi:", this.$refs.zidingyi.value); //zidingyi: 输入框输入多少就是多少
      console.log("info:", this.info); //info: 和v-model的值一样
    },
  },
};
</script>

总结：

1、:model和:zidingyi 这种只是一种命名方式，:  后面的名称可以随意；

2、是v-bind:model的缩写，v-bind是一个动态绑定指令；

3、:v-bind:model 和 v-model不同，v-model是双向绑定，如上例：input值改变，变量info的值也会同时改变，点击事件中，info值是随着v-model变化而变化的；

4、在组件使用v-model="xxx"的时候，v-model的值必须在data里面声明；

5、在组件上定义ref="xxx",可以通过this.$refs.xxx，获取dom元素，this.$refs.xxx.value获取组件上的值。