Custom components use v-model directive

Article reference

https://cn.vuejs.org/v2/guide/components.html#-v-model of custom components

 

<input v-model="something">

 

is syntactic sugar for (equivalent to)

 

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

 

Remark:

1. v-model is equivalent to passing a props property whose value is value

2, and listen for input events

3. Assign the value inside the component to the defined data

 

The following is the demo I wrote 

 

custom components

 

<template>
    <!-- There can only be one component in the outermost layer, no more than one -->
    <!-- Outermost class naming rule project-file path-file name-->
    <div class="">
        {{newData}}
        <button @click="changeData">Change Data</button>

    </div>
</template>

<script>
    export default {
        props:{
            value: "",
        },
        data: function (){
            return {
                newData:"",
            }
        },
        mounted: function(){
            debugger
            console.log("this.value : " + this.value);
        },
        methods: {
            changeData : function (){
                debugger
                this.newData = new Date().getTime() + "----" + this.value;
                this.$emit("input",this.newData);
            }
        },
        watch: {
            input:function (newValue, oldValue) {
                console.log("watch input" + newValue);
            }
        }
    }
</script>

 

 

Use custom builds

 

<template>
    <!-- There can only be one component in the outermost layer, no more than one -->
    <!-- Outermost class naming rule project-file path-file name-->
    <div class="demo-extendPrototype-stringExtend">
        <vmodel-comp
            v-model="userinput"
        ></vmodel-comp>
        {{userinput}}
    </div>
</template>

<script>
    import vmodelComp from "./vmodelComp.vue";
    export default {
        mounted: function(){
        },
        data: function (){
            return {
                userinput:"huangbiao"
            }
        },
        components:{
            vmodelComp
        }
    }
</script>