vue的数据双向绑定v-model

v-model

v-model双向数据绑定，它做了两件事情：1.绑定了value值 2.监听input事件

实现原理：

新建子组件Input.vue

<template>
  <div>
      <!-- v-bind后面是：属性名=，表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找 -->
      <!-- 子组件向父组件传值，用@事件名=“方法名”，下面方法里面, 方法名(){this.$emit('父组件里面的方法名',要传的值)}-->
     <input type="text" :value="value" @input="onInput">
  </div>
</template>

<script>
export default {
  props:['value'],//父组件把值传给子组件:在组件里通过props来接收你从父页面传过来的值
  methods:{
      onInput(e){
          let value = e.target.value;//监听input里面value值的改变
          this.$emit('input',value)//子组件向父组件传值：$emit来触发事件；
      }
  }
}
</script>

<style scoped>

</style>

父组件中：

<template>
  <div id="app">
    {{value}}
    <!--v-model双向数据绑定，它做了两件事情：1.绑定了value值 2.监听input事件 -->
    <K-input :value="value" @input="value = arguments[0]"></K-input>
  </div>
</template>

<script>
import KInput from "./components/Input.vue";
export default {
  name: "app",
  components: {
    KInput
  },
  data() {
    return {
      value: ""
    };
  }
};
</script>
<style>
</style>

父子组件之间的传值：

https://blog.csdn.net/tianjian_zhou/article/details/85077563