zoukankan      html  css  js  c++  java
  • Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的?

      本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章。

      1、创建新的Vue实例引入项目中,通过$emit、$on来实现非父子组件传值;

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Vue非父子组件传值-雨中愚</title>
     8 </head>
     9 <body>
    10     <div id="app"></div>
    11 </body>
    12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    13 <script>
    14     //创建新的Vue实例,引入Vue原型中,方便调用;
    15     Vue.prototype.eventBus = new Vue();
    16 
    17     const child1 = {23         methods:{
    24             handleSendMsg(){
    25                 //通过$emit向外层触发事件并传递参数;第一个参数是事件名字随便起但需跟$on中的事件名字一样
    26                 this.eventBus.$emit('eventName','第二个参数是你想要传递的值')
    27             },
    28         },
    29         template:
    30         `<div>
    31             <h2>我是组件1</h2>
    32             <button @click="handleSendMsg">向其他组件发送值</button>
    33             <hr/>
    34         </div>`,
    35     }
    36 
    37     const child2 = {
    38         data:function(){
    39             return {
    40                 msg: '',
    41             }
    42         },
    43         mounted(){
    44             //$on监听child1组件的事件来实现传值;第一个参数是事件名字随便起但需跟$emit中的事件名字一样,第二个为回调函数
    45             this.eventBus.$on('eventName',(data)=>{
    46                 //触发事件才会执行;
    47                 this.msg = data;
    48             })
    49         },
    50         template:
    51         `<div>
    52             <h2>我是组件2</h2>
    53             <p>接收到的值事:{{msg}}</p>
    54         </div>`,
    55     }
    56 
    57     var vm = new Vue({
    58         el: "#app",
    59         components:{
    60             child1,
    61             child2
    62         },
    63         template:`
    64         <div>
    65             <child1/>
    66             <child2/>
    67         </div>
    68         `,
    69     })
    70 </script>
    71 </html>

      2、是否感觉非父子之间传值很神奇,那么如何自己实现$on、$emit、$off,通过写入下面标红代码即可实现非父子组件传值;

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Vue非父子组件传值-雨中愚</title>
     8 </head>
     9 <body>
    10     <div id="app"></div>
    11 </body>
    12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    13 <script>
    14 
    15     const eventList = {};
    16     const $on = function(eventName,cb){
    17         if(!eventList[eventName]){
    18             eventList[eventName] = [];
    19         }
    20         eventList[eventName].push(cb);
    21     }
    22     const $emit = function(eventName,params){
    23         if(!eventList[eventName]){
    24             return;
    25         }
    26         var eventarr = eventList[eventName];
    27         eventarr.map(cb=>{
    28             cb(params);
    29         })
    30     }
    31     const $off = function(eventName){
    32         eventList[eventName]=[];
    33     }
    34 
    35     const eventBus = {
    36         $on,
    37         $emit,
    38         $off
    39     }
    40     Vue.prototype.eventBus = eventBus;
    41 
    42     const child1 = {48         methods:{
    49             handleSendMsg(){
    50                 //通过$emit向外层触发事件并传递参数;第一个参数是事件名字随便起但需跟$on中的事件名字一样
    51                 this.eventBus.$emit('eventName','第二个参数是你想要传递的值')
    52             },
    53         },
    54         template:
    55         `<div>
    56             <h2>我是组件1</h2>
    57             <button @click="handleSendMsg">向其他组件发送值</button>
    58             <hr/>
    59         </div>`,
    60     }
    61 
    62     const child2 = {
    63         data:function(){
    64             return {
    65                 msg: '',
    66             }
    67         },
    68         mounted(){
    69             //$on监听child1组件的事件来实现传值;第一个参数是事件名字随便起但需跟$emit中的事件名字一样,第二个为回调函数
    70             this.eventBus.$on('eventName',(data)=>{
    71                 //触发事件才会执行;
    72                 this.msg = data;
    73             })
    74         },
    75         template:
    76         `<div>
    77             <h2>我是组件2</h2>
    78             <p>接收到的值事:{{msg}}</p>
    79         </div>`,
    80     }
    81 
    82     var vm = new Vue({
    83         el: "#app",
    84         components:{
    85             child1,
    86             child2
    87         },
    88         template:`
    89         <div>
    90             <child1/>
    91             <child2/>
    92         </div>
    93         `,
    94     })
    95 </script>
    96 </html>
  • 相关阅读:
    ABAP接口用法
    监听textarea数值变化
    The first step in solving any problem is recognizing there is one.
    Wrinkles should merely indicate where smiles have been.
    God made relatives.Thank God we can choose our friends.
    Home is where your heart is
    ABAP跳转屏幕
    Python 工具包 werkzeug 初探
    atom通过remote ftp同步本地文件到远程主机的方法
    Mongodb学习笔记一
  • 原文地址:https://www.cnblogs.com/yuzhongyu/p/10485055.html
Copyright © 2011-2022 走看看