• vue兄弟组件间的传参$refs, $emit, $on, $once, $off的使用


    1.$refs的使用场景

    父组件调用子组件的方法,可以传递数据。

    父组件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <div id="app">
      <child-a ref="child"></child-a>
      <button @click="getMyEvent">点击父组件</button>
    <div>
     
    <script>
      import ChildA from './child.vue'
       
      export default{
        components:{
          ChildA
        },
        data(){
          return {
            msg:'我是父组件的数据'
          }
        },
        methods:{
          getMyEvent(){
            //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
            this.$refs.child.emitEvent(this.msg)
          }
        }
      }
    </script>

    子组件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <template>
      <button>点击我</button>
    </template>
    <script>
      export default{
        methods:{
          emitEvent(msg){
            console.log('接收的数据------'+msg)
          }
        }
      }
    </script>

    2.$emit的使用

    子组件调用父组件的方法并传递数据。

    子组件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
      <button @click="emitEvent">点击我</button>
    </template>
    <script>
      export default{
        data(){
          return{
            msg:'我是子组件的数据'
          }
        },
        methods:{
          emitEvent(){
            //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
            this.$emit('my-event',this.msg)
          }
        }
      }
    </script>

    父组件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <template> 
      <div id="app">
        <child-a @my-event="getMyEvent"></child-a>
        //父组件通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值。
      </div>
    </template>
    <script>
      import childA from './child.vue';
      export default {
        components:{
          childA
        },
        methods:{
          getMyEvent(msg){
           console.log('接收数据---'+msg);
           //接收数据,我是子组件的数据
          }
        }
      }
    </script>

    3.$on的使用场景

    兄弟组件之间相互传递数据。

    this.$root.$emit("change",'传的值');      //可以从$root获取vue的实例

    首先创建一个Vue的空白实例(兄弟组件的桥梁)

    1
    2
    import Vue from 'vue';
    export default new Vue();

    子组件A:发送放使用$emit自定义事件把数据带过去。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <template>
      <div>
        <span>A组件-{{msg}}</span>
        <input type="button" value="把A组件数据传递给B" @click="send">
      </div>
    </template>
    <script>
      import eventBus from './eventBus';
      export default{
        data(){
          return{
            msg:{
              a:'111',
              b:'222'
            }
          }
        },
        methods:{
          send(){
            eventBus.$emit('aevent',this.msg)
          }
        }
      }
    </script>

    子组件B:接收方通过$on监听自定义事件的callback接收数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <template>
      <div>
        <span>B组件,A传的数据为--{{msg}}</span>
      </div>
    </template>
    <script>
      import eventBus from './eventBus.vue'
      export default {
        data(){
          return{
            msg:''
          }
        },
        mounted(){
          eventBus.$on('aevent',(val)=>{//监听事件aevent,回调函数要使用箭头函数。
            console.log(val);//打印结果;我是a组件的数据。
          })
        }
      }
    </script>

    父组件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <template> 
      <div>
        <childa></childa>
        <br/>
        <childb></childb>
      </div>
    </template>
    <script>
      import childa from './childa.vue';
      import childb from './childb.vue';
      export default{
        componets:{
          childa,
          childb
        },
        data(){
          return{
            msg:''
          }
        }
      }
    </script>
     
    4.$off的使用场景
     

    vm.$off( [event, callback] )
    参数:
    {string | Array<string>} event (只在 2.2.2+ 支持数组)
    {Function} [callback]
    用法:
    移除自定义事件监听器。
    如果没有提供参数,则移除所有的事件监听器;
    如果只提供了事件,则移除该事件所有的监听器;
    如果同时提供了事件与回调,则只移除这个回调的监听器。

    eventBus.$off("aevent");
     
     

  • 相关阅读:
    Hadoop 0.23.1 Release Notes
    maven编译参数
    Hadoop快速入门
    HTML Parser HTML Parser
    EasyHadoop v1.0
    Hudson+Maven+SVN 快速搭建持续集成环境
    对技术要有足够的尊重和敬畏
    hudson设置
    python之强大的日志模块 竹叶青 的专栏 博客频道 CSDN.NET
    PHP学习之七:错误控制运算符
  • 原文地址:https://www.cnblogs.com/ygyy/p/14597290.html
Copyright © 2020-2023  润新知