current position:Home>Vue component communication (props, refs)

Vue component communication (props, refs)

2022-01-26 23:35:23 huxiaoxiao.

Communication between parent and child components ( Communications ) ( Communication of components yes vue One of the core ) Components are vue At the heart of , The communication of components is vue The core of the core

signal communication : Data “ Dynamic, real-time ” Pass on


Father's son

Father's son :( Sub components )props attribute ----- When the father uses the son adopt attribute Pass on

1. First create the root component and a local component , Register local components in the root component , Make the local component a child of the root component

<body>
    
    <div id="app">

        <one></one>
    </div>
    <template id="one">
        <div>
            <h1> I am a subcomponent one</h1>
        </div>
    </template>

    <script src="./js/vue2.6.14.js"></script>
    <script>
        let one = {
            template:`#one`
        }


        let vm = new Vue({
            el:'#app',
            data:{

            },
            components:{
                one
            }
        })
    </script>
</body>

 2. There are three pieces of data in the data center of the root component , Namely character string ,num, Array

 data:{
                mes:' I am the data in the parent component , I want to pass it on to the sub assembly ',
                num:100,
                list:[1,2,3,4,5]
            }

3. Defined in subcomponent props Properties of ----- I want to state props[' Property name '] To receive ( receive Father Pass on to Son of data )

let one = {
            props:['getmes','number','arr'],
            template:`#one`
        }

            //  Several other ways of writing 
            // props:['getmes'],
            //  Another way of writing , Tell others about my data type 
            // props:{'getmes':{type:String}},
            //  Another way of writing , Simplify the previous 
            // props:{getmes:String},
       // props:{
            //     getmes:String,
            //     number:Number,
            //     arr:Array
            // },

4. When using child components in the view layer of the parent component , Bind data

<div id="app">

        <one :sendone="mes" :num="i" :list="arr"></one>
    </div>

5. Use the data from the parent in the view layer of the child component :

<template id="one">
        <div>
            <h1> I am a subcomponent one</h1>
            <p> Received parent component data ----{
   {getmes}}</p>
            <p> Received value ---{
   {number}}</p>
            <ul>
                <li v-for="i in arr">{
   {i}}</li>
            </ul>
        </div>
    </template>


Father instance ( Parent component )

ref obtain Subcomponent instance ( In the template , When using components , Added on the component ref attribute )

distinguish : Use attributes on subcomponents or elements ref

    ref--- In order to identify When the parent component gets the component instance , can Identify to who yes who

ref and $refs Parent component and Child components ( Between father and son The data access )

1. Create root component , And two subcomponents

<body>
    <div id="app">

        <one></one>
        <two></two>
    </div>
    <template id="one">
        <div>
            <h1> I am a subcomponent one</h1>
        </div>
    </template>
    <template id="two">
        <div>
            <h1> I am a subcomponent two</h1>
        </div>
    </template>

    <script src="./js/vue2.6.14.js"></script>
    <script>
        let one = {
            template:`#one`
        }
        let two = {
            template:`#two`
        }
        let vm = new Vue({
            el:'#app',
            data:{

            },
            components:{
                one,
                two
            }
        })
    </script>
</body>

2. There is data and a calculated attribute in the sub component :

let one = {
            template:`#one`,
            data(){
                return {
                    mes:' I am a one The data of '
                }
            }
        }
        let two = {
            template:`#two`,
            data(){
                return {
                    num:10
                }
            },
            computed:{
                setnum(){
                    this.num*100
                }
            }
        }

3. In the view layer of the root component, pass   ref Give the subcomponent a name :

<div id="app">

        <one ref="aaa"></one>
        <two ref="bbb"></two>
    </div>

4. Access the data of sub components in the life cycle function of the root component :

 mounted(){
                console.log(this.$refs);
                console.log(this.$refs.aaa.mes);
                console.log(this.$refs.bbb.setnum)
            }

 

copyright notice
author[huxiaoxiao.],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262335197963.html

Random recommended