Vue双向数据绑定

1、components中创建子组件Input.vue  

下图是文件目录，我这个是直接用的vue-cli4 脚手架

2、在input.vue 文件中写input

<!--  -->
<template>
  <div>
	  <input type="text" :value="value" @input="onInput">
  </div>
</template>

<script>
export default {
  data () {  
    return {

    };
  },

  methods: {
    onInput(e){
      let value = e.target.value
      this.$emit("input",value)
    }
  },
  props:['value']
}

</script>
<style lang='less' scoped>
</style>

3、在父组件文件Home.vue中引入子组件

命名为MyInput 

第一个MyInput组件的效果就是第二个组件中v-model的效果

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    {{value}}
    <MyInput :value="value" @input="value = arguments[0]"></MyInput>
    <!-- <MyInput v-model="value"></MyInput> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import MyInput from "@/components/Input.vue";

export default {
  name: "home",
  components: {
    // HelloWorld
    MyInput
  },
  data(){
    return{
      value:''
    }
  }
};
</script>