• vue中$refs, $emit, $on, $once, $off的使用


    1.$refs的使用场景

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

    父组件:

    <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>
    

    子组件:

    <template>
        <button>点击我</button>
    </template>
    <script>
        export default{
            methods:{
                emitEvent(msg){
                    console.log('接收的数据------'+msg)
                }
            }
        }
    </script>
    

    2.$emit的使用

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

    子组件:

    <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>
    

    父组件:

    <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的使用场景

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

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

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

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

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

    <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接收数据

    <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>
    

    父组件:

    <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>
  • 相关阅读:
    saolei
    Hibernate中表与表之间的关联多对多,级联保存,级联删除
    Hibernate中表与表之间的关联一对多,级联保存和级联删除
    Hibernate中的Query对象查询所有记录
    Hibernate缓存
    hibernate简单实现连接数据库,并实现数据的操作
    Navicat注册码
    用jdbc连接数据库并简单执行SQL语句
    JDBC中的DriverManager.getConnection(url)中的参数url
    spring进行事务管理
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14132614.html
Copyright © 2020-2023  润新知