vue資料綁定方式詳解

眾所周知，vue是單向資料流，子元件不能直接改變父元件中的變量，如下：

#parent.vue

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        }
    }
</script>

children.vue

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击改变children的msg</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

頁面如下：

##點擊後：

上面是最基礎的父向子元件傳遞數據，子元件修改變數不影響父元件，那麼父子組件如果要同步呢？這時應該要使用

this.$emit()這個函數了。

第一種：v-model傳遞

#父元件修改：##

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children v-model="msg"></children>
    </p>
</template>

子元件修改：

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;input&#39;, "child")
            }
        }
    }
</script>

注意：model部分不能省略，this.$emit（）觸發的事件為input（當父元件上沒有明確綁定回傳事件時，input為默認），傳遞的值為child

頁如下：

點擊後：

#可見父子元件的值同步了

第二種：明確指定回應事件（@）

父元件修改：

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children @upChange="changeMsg" :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        },
        methods: {
            changeMsg() {
                this.msg = "收到子组件信号，嘤嘤嘤"
            }
        }
    }
</script>

##子元件修改：

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "给你一个value")
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

這裡我故意在emit之後修改了msg的值，事實證明，這是不行的，所以我猜測emit是一個非同步函數，會在隊列的最後執行，也就是說這裡賦值' from children'最後被覆蓋了。

值得一提的是，this.$emit（）第二個參數可向父元件傳值，這裡用處很大，自行體會

頁如下：

點擊後：

兩種方法都基本上可以達到預期效果，具體自己分情況使用

說完父子通信後，理所當然到子子組件通信了，其實，機智的你應該也想到怎麼做了。沒錯，就是利用父組件當跳板，讓子子組件達到通訊的效果。

下面還是給個小範例：

#父元件：

##

<template>
    <p>
        <children @upChange="changeMsg" :msg="msg"></children>
        <children2 :msg2="msg2"></children2>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    import children2 from &#39;@/components/children2&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;,
                msg2: &#39;from parent&#39;
            }
        },
        components: {
            children,
            children2
        },
        methods: {
            changeMsg(value) {
                this.msg = value
                this.changeChild2()
            },
            changeChild2() {
                this.msg2 = "children2收到 children2收到  over over！"
            }
        }
    }
</script>

子元件一：

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击呼叫children2</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "children2，children2，收到请回答，收到请回答")
            }
        }
    }
</script>

子元件二：

<template>
    <p>
       <p>children2: {{ msg2 }}</p>
    </p>
</template>
<script>
    export default {
        name: &#39;children2&#39;,
        data () {
            return {

            }
        },
        props: [&#39;msg2&#39;]
    }
</script>

頁如下：                  點擊後：

本文介紹了vue資料綁定方式詳解，更多相關內容請關注php中文網。
相關推薦：

簡易PHP MySQL 分頁類別

#兩個不用遞歸的樹狀陣列建構子

HTML轉Excel，並實作列印，下載功能

#

以上是vue資料綁定方式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！