Detailed explanation of vue data binding method

As we all know, vue is a one-way data flow, and child components cannot directly change variables in the parent component, as follows:

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>

The page is as follows:

Click After:

The above is the most basic parent to pass data to the child component. Modifying variables of the child component does not affect the parent component. So what if the parent and child components want to be synchronized? At this time, you should use the this.$emit() function.

First type: v-model transfer

Parent component modification:

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

Subcomponent modification:

<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>

Note: The model part cannot be omitted, the event triggered by this.$emit() is input (when the return event is not explicitly bound on the parent component, input is the default ), the value passed is child

page as follows:

After clicking:

It can be seen that the values ​​​​of the parent and child components are synchronized

Second type: Explicitly specify the response event (@)

Parent component modification:

<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>

Child component modification:

<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>

Here I deliberately modified the value of msg after emit. It turns out that this is not possible, so I guess that emit is an asynchronous function that will be executed at the end of the queue, which means that the value is assigned here' from children' was eventually overwritten.

It is worth mentioning that the second parameter of this.$emit() can pass the value to the parent component. It is very useful here. You can experience it by yourself

The page is as follows:

##After clicking:

Both methods can basically achieve the expected results. You can use them according to the specific situation.

After talking about the communication between father and son, it is natural to communicate between the child and child components. Yes, in fact, you are smart and should have figured out how to do it. That's right, it uses the parent component as a springboard to allow child components to achieve communication effects.

Here is a small example:

Parent component:

<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>

Sub-component one:

<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>

Sub-component two:

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

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

The page is as follows:                                                       After clicking:

This article introduces the detailed explanation of vue data binding method. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:

Simple PHP MySQL paging class

Two tree array constructors without recursion

Convert HTML to Excel, and realize printing and downloading functions

The above is the detailed content of Detailed explanation of vue data binding method. For more information, please follow other related articles on the PHP Chinese website!