vue component communication

assembly

The data between components is one-way bound.

Parent communicates with child

It is implemented by props attribute defined by subcomponent. Through props to define variables and variable types and validation methods.

props simplified definition

In the simplified definition, variables are defined as arrays.

Vue.component("test",{
       template:'....',
       props:["Variable 1","Variable 2",...]
})

props full definition

The complete definition is in the form of literal quantity. Type is the type to be defined

Vue.component("test",{
    template:'....',
    props:{
        name:String,  // Variables: Types,
        name1:[String,Number] // Multiple types: can be string or numeric
        name2:{
            type:Array,   // Array or object type to set a default value.
            default(){
                return [];
            }
        },
        name3:{
            type:String,
            required:true,   // Biography
        }
        name3:{
            type:String,   
            validator(value){
                //...  Custom data validation method.
            }
        }
    }
})

communication mode

The parent binds values to variables defined by the child.

    <p>Parent component passes data to child component count Data, using v-bind After data binding, when the value of the parent component changes, the child component will also change.</p>
    <div class="app">
        <input v-model="count">
        <my-component :number="count"></my-component>
    </div>
    <script>
        // Define subcomponents
        Vue.component("my-component", {
            props:["number"],
            template:`<span>Dynamic reception:{{number}}</span>`,
        });
        new Vue({
            el: ".app",
            data: {
                count: 0
            }
        });
    </script>

Child component communicates with parent component

Custom events are used by child components to communicate with parent components. $emit and $on.

    <p>Custom events are used by child components to communicate with parent components. $emit And $on. </p>
    <div class="app">
        {{count}}
        <!-- Equivalent to setting the receiving object -->
        <my-component @add="getcount"></my-component>
    </div>
    <script>
        // Define subcomponents
        Vue.component("my-component", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="test">+1</button>`,
            methods: {
                test() {
                    this.$emit('add', ++this.count);   // When a listening event is triggered, a message is passed to the receiving object to tell it the amount of change.
                }
            }

        });
        new Vue({
            el: ".app",
            data: {
                count: 0
            },
            methods:{
                getcount(value){
                    this.count = value;
                }
            }
        });
    </script>

Peer component communication (any level of component communication)

It is realized by the central event bus. To create an empty vue object, set the $on event in the component to receive data, and set the $emit event in the component to listen to

    <p>Peer component, component 1 passes data to component 2.</p>
    <p>When components+1 When the event is triggered, the result is passed to component 2.</p>
    <div class="app">
        <my-component-1></my-component-1>
        <my-component-2></my-component-2>
    </div>
    <script>
        let bus = new Vue();

        // Define subcomponents
        Vue.component("my-component-1", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="test">+1</button>`,
            methods: {
                test() {
                    bus.$emit('on-add', ++this.count);
                }
            }

        });

        // Define subcomponents
        Vue.component("my-component-2", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<span>{{count}}</span>`,
            mounted() {
                bus.$on("on-add", (vlaue) => {
                    this.count = vlaue
                })
            }
        });
        new Vue({
            el: ".app"
        });
    </script>

Tags: Javascript Vue Attribute

Posted on Fri, 06 Dec 2019 23:22:27 -0500 by colmtourque