vue中 v-model指令实现原理，关于父子传值

v-model指令限制只能用在这些元素上：input、select、textarea、components(自己封装的组件)，在表单控件或者组件上创建双向绑定获取用户输入数据，原因是v-model监听了input事件。

这里我是使用vue组件演示的

分析父组件代码

<template>
  <div>
    <!-- 把值赋给自定义的porps值 -->
    <myinput placeholder="用户名/手机号" v-model="user.username"></myinput>
    <!-- <myinput
      placeholder="用户名/手机号"
      @input="getUserName"
      :value="user.username"
    ></myinput> -->
    <myinput
      type="password"
      placeholder="密码"
      v-model="user.password"
    ></myinput>
    <mybuttom str="confirm" @click="login">登录</mybuttom>

    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
// 1.引入子组件
import mybuttom from "./components/mybuttom";
import myinput from "./components/myinput";
export default {
  data() {
    return {
      user: { username: "", password: "" },
    };
  },
  components: {
    //   2.注册子组件
    mybuttom,
    myinput,
  },
  methods: {
    login(e) {
      console.log(this.user);
    },
    getUserName(data) {
      this.user.username = data;
    },
  },
};
</script>

<style>
</style>

这里的v-model做的事件就是代码值中的

<!-- <myinput
      placeholder="用户名/手机号"
      @input="getUserName" 
       //子组件的自定义事件，父组件methods处理函数(得到子传数据)
      :value="user.username"
    ></myinput> -->s
// 就是input事件得到的事件对象event.target.value 赋值给data里面
 //的数组对象，方便然后调用，或者作为发送请求的参数

我们分析子组件的代码

<template>
  <div>
    <input class="myinput" 
    //当用户输入的时候，我们调用input事件，把值传个父组件
    @input="handlerInput"
    //默认把父组件设置的value和placeholder还有type，
    //从根元素div给到input
    v-bind="$attrs" />
    
	//没加:$attrs，就需要写下面方式
    <!-- <input
      class="myinput"
      @input="handlerInput"
      :value="value"
      :type="type"
      v-bind="$attrs"
    /> -->
  </div>
  <!-- <input class="myinput" @input="handlerInput" /> -->
</template>

<script>
export default {
  inheritAttrs: false,   
  //设置了inheritAttrs:false  就不需要设置props 
  //默认把父组件设置给了子组件的根元素，就是div
  // props: ["value", "type"],   这里我并没有设置
  methods: {
    handlerInput(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style>
.myinput {
  display: block;
  width: 90%;
  outline: none;
  border: 0;
  margin: 0 auto 30px;
  font-size: 20px;
  border-bottom: 2px solid #666;
}
</style>

1. 这个根组件为div，input不是跟组件，我们需要在 input标签
   加上 v-bind="$attrs"

在当前元素上绑定所有元素的默认属性，就是相当于以后使用这个组件时，可以直接使用这个元素的默认属性， 同时，其它的属性设置也会添加到这个元素上
2. inheritAttrs:false
作用为：
1.如果封装组件中有props的设置，那么就会赋值给props属性
2.如果赋值的属性在props中没有定义，那么就会赋值添加到封装组件的根元素
这个属性的作用就是让我们的根元素不要接收在使用封装组件时所设置的属性
子组件里面没有设置porps

methods
模块设置一个input事件触发的一个自定义事件，$emit 作用是把子组件的值传到父组件，从而造成双向绑定。

新手，记录代码，求勿喷！