vue中$on与$emit的实际应用

最新推荐文章于 2023-06-07 10:52:45 发布

weixin_30480075

最新推荐文章于 2023-06-07 10:52:45 发布

阅读量140

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pomelott/p/8322105.html

版权

$on常用于监听自定义事件，触发后可传入参数

//监听event1事件
vm.$on('event1',function(msg){
      console.log(msg)    
})

//触发event1自定义事件
vm.$emit('event1','参数')

需要注意的时，自定义事件必须绑定在实例上，否则无效。

应用一：传值可用于组件间的数据通信，如下例：（将A组件的数据a和B组件的数据b传入C组件中）

        //A组件
        var A={
            template:"<div><h2>组件A</h2><input type='button' value='btnA' @click='send'></div>",
            data(){
                return {
                    a:"data A"
                }
            },
            methods:{
                send(){
                    Event.$emit("a-msg",this.a);
                }
            }
        };

        //B组件
        var B={
            template:"<div><h2>组件B</h2><input type='button' value='btnB' @click='send'></div>",
            data(){
                return {
                    b:"data B"
                }
            },
            methods:{
                send(){
                    Event.$emit("b-msg",this.b);
                }
            }
        };

        //C组件
        var C={
            template:"<div><h2>组件C</h2><h3>{{a}}</h3><h3>{{b}}</h3></div>",
            data(){
                return {
                    a:"",
                    b:""
                }
            },
                mounted(){
                    var _this=this;
                    Event.$on("a-msg",function(str){
                        _this.a=str;
                    })
                    Event.$on("b-msg",function(str){
                        _this.b=str;
                    })
                }
        }

注册组件

       new Vue({
            el:"#box",
            components:{
                "com-a":A,
                "com-b":B,
                "com-c":C
            }
        })

应用一示例的全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>


    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
    var Event=new Vue();
        var A={
            template:"<div><h2>组件A</h2><input type='button' value='btnA' @click='send'></div>",
            data(){
                return {
                    a:"data A"
                }
            },
            methods:{
                send(){
                    Event.$emit("a-msg",this.a);
                }
            }
        };
        var B={
            template:"<div><h2>组件B</h2><input type='button' value='btnB' @click='send'></div>",
            data(){
                return {
                    b:"data B"
                }
            },
            methods:{
                send(){
                    Event.$emit("b-msg",this.b);
                }
            }
        };
        var C={
            template:"<div><h2>组件C</h2><h3>{{a}}</h3><h3>{{b}}</h3></div>",
            data(){
                return {
                    a:"",
                    b:""
                }
            },
                mounted(){
                    var _this=this;
                    Event.$on("a-msg",function(str){
                        _this.a=str;
                    })
                    Event.$on("b-msg",function(str){
                        _this.b=str;
                    })
                }
        }

        new Vue({
            el:"#box",
            components:{
                "com-a":A,
                "com-b":B,
                "com-c":C
            }
        })
    </script>
</body>
</html>

应用二：子组件与父组件的通信

父组件代码：（父组件自定义changeTitle函数）

<template>
    <section class="sear-box">
　　　　　//将isShow数据传递给searchInput组件，并进行双向绑定，子组件数据更新后，父组件的数据也相应改变，从而改变相应数据驱动的视图，2.3.x版本中恢复sync的使用。
        <searchInput :isShow.sync='listShow' :title='title'></searchInput>
        <searchList v-show='listShow' @changeTitle='titleHandle'></searchList>
    </section>
</template>
<script>
    //搜索框
    import searInput from './searInput'
    //搜索推荐列表
    import searList from './searList'
    export default {
        components: {
            searchInput: searInput,
            searchList: searList
        },
        data () {
            return {
                listShow: false,
                title: ''
            }
        },
        methods: {
                 //自定义事件的事件处理函数
            titleHandle (title) {
                this.title = title
            }
        }
    }
</script>

子组件：

<template>
    <section>
        <ul class="sear-list">
            <li v-for='item in data' :key='item.id' @click='listClickHandle(item.title)'>{{ item.title }}</li>
        </ul>
    </section>
</template>
<script>
    let data = [
        {title: 'html', id: 1},
        {title: 'html+css', id: 2},
        {title: 'html+css3', id: 3}
    ]
    export default {
        data () {
            return {
                data: data
            }
        },
        methods: {
            listClickHandle (title) {
                //点击搜索推荐列表项时触发listClickHandle函数并触发自定义事件changeTitle
                this.$emit('changeTitle', title)
            }
        }
    }
</script>

应用三：更新数据

父组件同应用二；

子组件代码：

<template>
    <section class="sear-con">
        <input type="text" name=""  class="sear-input" @click='clickHandle' v-model='title'><a href="#" class="sear-btn">search</a>
    </section>
</template>
<script>
    export default {
        props: ['isShow', 'title'],
        computed: {
            initShow () {
                return this.isShow
            }
        },
        methods: {
            clickHandle () {
                console.log('click')
                //点击搜索框时触发clickHandle函数并将isShow数据修改为!this.initShow
                this.$emit('update:isShow', !this.initShow)
            }
        }
    }
</script>

Demo的github地址https://github.com/pomelott/VueDemo

转载于:https://www.cnblogs.com/pomelott/p/8322105.html

weixin_30480075

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中$on与$emit的实际应用

$on常用于监听自定义事件，触发后可传入参数//监听event1事件vm.$on('event1',function(msg){ console.log(msg) })//触发event1自定义事件vm.$emit('event1','参数')需要注意的时，自定义事件必须绑定在实例上，否则无效。应用一：传值可用于组件间的数据通信，如...
复制链接

扫一扫