preface

Parent-child component communication

Use the props and $emit parent components to communicate with each other; $children; $children; $parent accesses the parent;

Non-parent component communication

1. Use intermediate eventbus (eventbus) to handle communication between non-parent and child components; 2. Ancestor elements provide data through provide, and descendants obtain the data through Inject; Use $attrs and $listenerSS to communicate with parent and grandson components. $root accesses the root component directly.

Next, the Event Bus and Provide Inject in communication between non-parent and child components are introduced

Event Bus

rendering

Direct coding

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Event Bus component communication </title> <script SRC =".. /node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
    <template id="coma"> <div> <h3>A component :{{MSG}}</h3> < button@click ="sendToC">A sends MSG to C component </button> </div> </template> <template id="comb"> <div> <h3>B component :{{MSG}}</h3> < button@click ="sendToC"</button> </div> </template> <template id="comc"> < div > < h3 > C components: {{MSG}} < / h3 > < / div > < / template > < script > / / the Event bus var Event = new Vue (); var A= { template:'#coma'.data() {return {
                   msg:'MSG from A to C'
               }
           },
           methods:{
               sendToC(){
                   Event.$emit('data-a',this.msg); }}}; var B= { template:'#comb'.data() {return {
                   msg:'MSG from B to C'
               }
           },
           methods:{
               sendToC(){
                   Event.$emit('data-b',this.msg); }}}; var C= { template:'#comc'.data() {return {
                   msg:' '}},mounted(){
               Event.$on('data-a',msg=>{
                   this.msg = msg;
               });
               Event.$on('data-b',msg=>{ this.msg = msg; })}};let vm = new Vue({
           el:'#app',
           components:{
               'com-a':A,
               'com-b':B,
               'com-c':C
           }
       });
   </script> 
</body>
</html>
Copy the code

provide inject

rendering

code

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>provide-- Inject component communication mode </title> <script SRC =".. /node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>
            {{projectName}}
            <br/>
            {{appName}}
            <br/>
            {{timeFlag}}
            <br/>
        </h1>
        <Parent/>
    </div>
    <script>
        const Child = {
            inject:['appName'.'projectName'], template: '<div> {{projectName}} <br/> {{appName}} Parent changes appName </div>'}; const Parent = { inject:['appName'.'timeFlag'.'projectName'].provide() {return{
                    appName:this.appName + 'appName after parent receives data from superior',
                }
            },
            components:{
                Child,
            },
            template:`<div>                
                {{projectName}}
                <br/>
                {{appName}}
                <br/>
                {{timeFlag}}
                <br/>
                <Child/>
                </div>`
        }
        const projectName = 'Cross-level component communication';
        let vm = new Vue({
            el:'#app',
            components:{
                Parent
            },
            provide() {return{
                    projectName:this.projectName,
                    appName:this.appName,
                    timeFlag:this.timeFlag
                }
            },
            data:{
                
                    projectName,
                    appName:'That's the name of your app.',
                    now:Date.now()
                
            },
            computed:{
                timeFlag() {returnthis.now; }},created() {setInterval(()=>{ this.now = Date.now(); }}}, 1000)); </script> </body> </html>Copy the code

Note: Provide Inject component communication data is non-responsive