vue學習之-----v-model數據雙向綁定,自定義組件父子傳參

1、官網定義：

v-model指令-----在表單input，textarea及select元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

v-model本質上是語法糖，它負責監聽用戶的輸入事件以更新數據。

<template>
    <div>
        <div>v-model一般使用方式：</div>
        <div>
            <input v-model="message">
            <p>同步更新為: {{ message }}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: "初始值"
            }
        }
    }
</script>

<style>
</style>

效果：

//相當於把輸入值value屬性綁定為動態值，這個值被input方法控制為輸入值本身，這就使得輸入值變為公用值，實現聯動：
......
<input :value="message" @input="inputMessage" />
......

//inputMessage方法為：
inputMessage(e){
　　this.message= e.target.value
}

2、在父子傳參中的用法：

官網中的這句話-------“一個組件上的v-model默認會利用名為value的 prop 和名為input的事件”

可以理解為：父子組件想通過v-model實現數據雙向聯動，則默認父組件調用子組件時，會把值傳遞給名為value的prop，而子組件觸發input事件時會更新父組件中傳遞的value值！

而value和input是可以通過model選項自己定義的。

（1）子組件中是input輸入框的情況：

》》父組件

<template>
    <div>
        <div>v-model一般使用方式：</div>
        <div>
            <input v-model="message">
            <input :value="message" @input="inputMessage" />
            <p>同步更新為: {{ message }}</p>
        </div>
        <h5>父子傳參中v-model的使用：子組件中是input輸入框</h5>
        <vModelCpn v-model="message"></vModelCpn>
    </div>
</template>

<script>
    import vModelCpn from './components/v-model-cpn.vue'
    export default {
        components:{
            vModelCpn
        },
        data() {
            return {
                message: "初始值"
            }
        },
        methods:{
            inputMessage(e){
                this.message= e.target.value
            }
        }
    }
</script>

<style>
</style>

》》子組件

<template>
    <div>
        <input v-model="valueA" />
    </div>
</template>

<script>
    export default{
        props:['value'],
        data(){
            return{
                valueA:""
            }
        },
        watch:{
            value:{
                handler(val){
                    this.valueA=val
                },
                deep:true
            }
        },
        mounted(){
            this.valueA=this.value
        },
        methods:{
            
        }
    }
</script>

<style>
</style>

效果：

 

 （2）子組件中不是表單元素的情況：

》》父組件------同上

》》子組件

<template>
    <div>
        <!-- <input v-model="valueA" /> -->
        <p>p標簽能同步嗎？？？？------{{valueA}}</p>
        <button @click="changeValue" type="button">改變value值</button>
    </div>
</template>

<script>
    export default {
        props: ['value'],
        model: {
            prop: 'checked',
            event: 'change'
        },
        data() {
            return {
                valueA: ""
            }
        },
        watch: {
            value: {
                handler(val) {
                    this.valueA = val
                },
                deep: true
            }
        },
        mounted() {
            this.valueA = this.value
        },
        methods: {
            changeValue() {
                this.valueA = "改變后的值-----hello!!!"
                // this.$emit("input", "改變后的值-----hello!!!")//默認監聽input事件
                this.$emit("change", "改變后的值-----hello!!!","3333")
            }
        }
    }
</script>

<style>
</style>

效果：

 

個人通俗易懂理解：

v-model通過監聽input，change等表單事件來同步prop值，如果子組件不是表單元素，就用自定義事件this.$emit造一個表單事件~~