[Vue框架学习笔记]v-model的实现

写在前面

认识流于表面，也就无法体会真正的意义了！今天我们就一起来研究一下v-model！

v-model的双向绑定到底是如何实现的呢？
如果我们要写自己的小组件，是会用到知识！

自己的理解

简单来说就是父子组件的互相通信

• 1.要实现父组件向子组件通信，可以在子组件添加一个props属性，父组件通过v-on动态传值给子组件就可以了！
• 2.要实现子组件向父组件通信，稍微复杂一点
  • 1.子组件通过@input="$emit('tofather',$event.target.value)"给父组件发送input的value
  • 2.父组件通过@tofather=‘msg=$event’ 将子组件发来的input中的value值赋值给自身的msg

这样子组件的值由父组件通过props传值
父组件又可以通过emit获得子组件的值

代码示例：

father.vue

<!--
 * @Author: 41
 * @Date: 2021-11-05 09:35:24
 * @LastEditors: 41
 * @LastEditTime: 2021-11-05 11:09:39
 * @Description:
-->
<template>
  <div id="app">
      <child :info='msg' @toFather='get'/>
      <!-- 这里的$event默认为$event.target.value 下面这个是简写！  -->
      <child :info='msg' @toFather='msg=$event'/>
      {{msg}}
  </div>
</template>

<script>
import child from '@/components/Child'
export default {
  name: 'father',
  data () {
    return {
      msg: '父组件'
    }
  },
  methods: {
    get: function (data) {
      this.msg = data
    }
  },
  components: {
    child
  }
}
</script>

<style scoped>

</style>

child.vue

<!--
 * @Author: 41
 * @Date: 2021-11-05 09:36:00
 * @LastEditors: 41
 * @LastEditTime: 2021-11-05 09:57:30
 * @Description:
-->
<template>
  <div>
      <input type="text" :value='info' @input="$emit('toFather',$event.target.value)"/>
  </div>
</template>
<script>
export default{
  name: 'child',
  data () {
    return {
    }
  },
  props: ['info'],
  methods: {
  }
}
</script>

<style>
</style>