vue 组件上v-model用法

父组件

<template>
  <div id="app">
    <span>{{ipt}}</span>
   <input type="text" @input="changeval" :vlaue="ipt">
   <span>{{ipt1}}</span>
   <input type="text" @input="ipt1=$event.target.value" :value="ipt1">
   <hr>
   <h4>{{count}}</h4>
    <!-- 父组件绑定v-module要传递得值 -->
   <Son v-model="count" ></Son>
   
  </div>
  
</template>
<script>
import Dau from "./components/dau.vue"
import Son from "./components/son"
    export default {
      data(){
        return {
          ipt:"",
          ipt1:"",
          count:1
        }
      },
      methods:{
        changeval(e){
            console.log(e.target.value);
            this.ipt = e.target.value
        }
      },
      components:{
        Son,Dau
      }
    }

</script>


<style>

</style>

子组件

<template>
    <div>
        {{this.value}}
        <button @click="fn">我是son组件的button</button>
    </div>
</template>

<script>
export default {

    props:["value"], // 通过v-model在子组件标签上接收到得值就叫value，且必须
    model: {    // model可以被必须叫叫input得事件名给起一个别名，在这里叫update
        prop: "value", //绑定的值，通过⽗组件传递
        event: "update" //⾃定义时间名
    },
     methods:{
         fn(){   // 自定义事件必须叫input
             this.$emit("update",this.value + 1)
         }
     }
}
</script>

<style>

</style>