vue event 自定义事件

子组件要把数据传递给父级依靠自定义事件

v折耳

25248人浏览 · 2016-11-30 16:07:58

v折耳 · 2016-11-30 16:07:58 发布

子组件要把数据传递给父级依靠自定义事件

自定义事件

监听$on(eventName)

触发$emit(eventName)

基本使用方法如下

使用app.$on('text',function(){})来自定义一个事件，实例中我使用click点击事件来触发addn 中的 app.$emit('text')给事件传递参数'hi';

app.$on监听到text 执行打印 value

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
        </div>
    </body>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(){
                     this.pn+=1;
                      this.$emit('text','hi');
                    }

            }
        });
        app.$on('text',function(value){
                        console.log(value);
                    })

    </script>

给予这个机制父级组件就可以将父级组件的信息传递给自己组件

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
            <zhe></zhe>
        </div>
    </body>
    <script>
    Vue.component('zhe',{
            template:'<div v-on:click="myevent">{{mes}}</div>',
            data:function(){
                return {mes:1}
            },
            methods:{
                myevent:function(){
                    this.mes+=1;
                    app.$emit('example','zhe')
                }
            }
        });
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(){
                     this.pn+=1;
                      this.$emit('example','hi');
                    }
            }
        });
        app.$on('example',function(value){
                        console.log(value);
                    })

    </script>

上图为先点击<zhe></zhe>,在点击<div @click="addn">{{pn}}</div>执行结果

这就实现了父级组件监听子级事件，通过事件可以将父级的数据传递给子集

以$on(eventName)和$emit(eventName)配合使用时，须注意的是vue的事件运行类似浏览器的事件运行机制

所有从可以使用浏览器的类似事件机制

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
            <zhe @myevent="addn(111)"></zhe>
            <zhe></zhe>
        </div>
    </body>
    <script>
    Vue.component('zhe',{
            template:'<div v-on:click="myevent">{{mes}}</div>',
            data:function(){
                return {mes:1}
            },
            methods:{
                myevent:function(){
                    this.mes+=1;
                    this.$emit('myevent')
                }
            }
        });
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(value){
                     this.pn+=1;
                     console.log(value);
                      this.$emit('example','hi');
                    }
            }
        });
        app.$on('example',function(value){
                        console.log(value);
                    })

    </script>

通过将子级组件的触发函数绑定到父级的事件上

<zhe @myevent="addn(111)"></zhe> 可以理解为触发父级组件事件的时候绑定了子集的方法函数addn()

换成你熟悉的事件就是<div v-on:click="addn(111)"></div> ;

但是触发myevent 是<div v-on:click="myevent">{{mes}}</div>的click myevent方法中触发

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^