自定义组件实现数据双向绑定

场景：在子组件内部通过input事件和value接收父组件的值

//子组件
//:value="value" @input="input" 模拟v-model的双向绑定，值通过props传入
<template>
  <div>
    <input type="text" :value="value" @input="input" />
  </div>
</template>

<script>
export default {
  name: "sonOne",
  props: {
    value: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
  },
  methods: {
    input(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

//父组件
<template>
  <div id="app">
<--使用子组件-->
    <sonOne v-model="from.username"/>
    {{from.username}}
  </div>
</template>

<script>
//引入子组件
import sonOne from "./components/son.vue";
export default {
  name: 'App',
  components: {
    sonOne
  },
  data(){
    return{
      from:{
        username:"",
        userpassword:""
      }
    }
  }
}
</script>

这样的话可以实现子组件的输入框内容动态传入效果