v-model和props直接的父传子

 v-model实现数据的双向绑定 数据（data）变化 ---->视图（view）也跟着变化 视图（view）变化 ---->数据（data）也随之变化 v-model 是一个语法糖，v-bind:value设置数据，使用v-on绑定input事件更改使用数据

单向数据流： props父向子传值：父组件通过props可以向子组件进行传值，如果父组件的数据变了，子组件的数据个会跟着改变，反过来就不行。

【App.vue】
<template>
  <div>
    <myform :module="user" :rules="rules">
      <myitem label="我是自定义标题">
        <myinput v-model="user.username"></myinput>
      </myitem>
    </myform>
  </div>
</template>

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b893c2304124488b21f9ecd06cb3d3d~tplv-k3u1fbpfcp-watermark.image?)
<script>
import myinput from "@/components/myinput";
import myform from "@/components/myform";
import myitem from "@/components/myitem";

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99dcef08eb46427f85507d101c87f5b8~tplv-k3u1fbpfcp-watermark.image?)
export default {
  data() {
    return {
      user: {
        username: "zy",
      },
      rules: {
        username: [
          {
            required: true,
            message: "用户必须填写",
          },
        ],
      },
    };
  },
  components: {
    myinput,
    myform,
    myitem,
  },
};
</script>

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/280224b4741a4137a5e13c7295ed65fb~tplv-k3u1fbpfcp-watermark.image?)
<style>
</style>

【myform.vue】
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "myname",
};
</script>

【myitem.vue】
<template>
  <div>
    <span>{{ label ? label : "标题" }}</span>
    <slot></slot>
    <p v-if="errormessage" style="color: red">{{ errormessage }}</p>
  </div>
</template>

<script>
export default {
  name: "myitem",
  created() {
    //校验数据
    this.$on("checkdata", () => {});
  },
  props: ["label"],
  data() {
    return {
      errormessage: "错误",
    };
  },
};
</script>

【myinput.vue】
<template>
  <div>
    <input type="text" :value="value" @blur="fn" />
  </div>
</template>

<script>
export default {
  name: "myinput",
  props: ["value"],
  methods: {
    fn(e) {
      this.$emit("input", e.target.value);
      this.$parent.$emit('checkdata')
    },
  },
};
</script>