在vue2.0中父组件如何触发子组件的自定义方法？

最新推荐文章于 2024-05-10 12:53:44 发布

Lucky_LXG

最新推荐文章于 2024-05-10 12:53:44 发布

阅读量1.7k

点赞数

分类专栏： vue 2.0

vue 2.0 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

如果我在父组件的button上绑定了click事件，我想当点击button时可以触发子组件(单文件的子组件xx.vue)的某个方法（如fn1），要这样的效果该怎样实现？之前看了vue1的文档实例里面有methods和events这两者有什么区别，为什么在vue2去掉dispatch后我用emit('fn'),如果fn放在events会没有响应，而放在methods里面才会被触发到？

子组件：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <script src="vue.js"></script>  
 </head>  
 <body>  
 <div id="parent">   
     <input type="text" name="" id="" v-model="msg" />  
     <input type="button" id="" value="dianji" @click="clickDt" />  
     <user-profile ref="profile"></user-profile>    
 </div>    
     
 <script>    
     Vue.component('user-profile', {    
         template: '<span>{{ msg }}</span>',    
         data: function () {    
             return {  
                 msg: 123  
             };  
         },    
         methods: {    
             greet: function (msg) {    
                 console.log(msg);    
             }    
         }    
     
     })    
 //      var parent = new Vue({el: '#parent'});    
 //      var child = parent.$refs.profile;    
 //      child.greet();    
     new Vue({  
         el:"#parent",  
         data:{  
             msg:""  
         },  
         methods: {  
                 clickDt(){  
                 this.$refs.profile.greet(this.msg);  
             }  
         }  
     })  
 </script>    
 </body>  
 </html>  

[javascript]view plaincopy
<template>  
    <div>  
    <button v-on:click="incrementCounter">count +1</button>  
    <button v-on:click="showMask">弹窗</button>  
    <input type="text" v-model="msg">  
    <button v-on:click='fdsf'>emit parent</button>  
    <p>{{something}}</p>  
    <button v-on:click="some">click</button>  
    </div>  
</template>  
<script type="text/javascript">  
import { mapGetters, mapActions } from 'vuex'  
var bus = new   
export default {  
   props:['parentmsg'],  
   data(){  
    return {  
      msg:'hello',  
      something:this.parentmsg  
    }  
   },  
   ready(){  
      console.log(window.location)  
   },  
   events:{  
      emitchild(){  
        console.log('ds0')  
      }  
   },  
   methods:{  
    ...mapActions([  
       'incrementCounter',  
       'showMask'  
    ]),  
    fdsf(){  
      this.$emit('clickfn',this.msg);  
    },  
    some(){  
      this.$emit('childjian',this.msg)  
    },  
    childdomeing(){  
      console.log('child99')  
    },  
    emitchild(){  
        console.log('ds0')  
      }  
}  
}  
</script>  

父组件

[javascript]view plaincopy 
   
 <template>  
     <div>  
         <Display></Display>  
         <Increment v-bind:parentmsg = "something" v-on:childjian="parentjian" v-on:clickfn = "dosomething" v-on:emitchild ="emitchild"></Increment>  
         <show-mask v-if="showHide">  
             <show-info></show-info>  
         </show-mask>  
         <button v-on:click='emitchild(something)'>emit child</button>  
     </div>  
 </template>  
 <script type="text/ecmascript-6">  
     import Display from './Display.vue';  
     import Increment from './Increment.vue';  
     import store from '../vuex/store' ;  
     import Mask from './Mask.vue';  
     import Xinjian from './xinjian.vue'  
     export default{  
         components:{  
             Display:Display,  
             Increment:Increment,  
             showMask:Mask,  
             showInfo:Xinjian  
         },          
         data(){  
             return {  
                something:'hello child'  
             }  
         },  
         computed:{  
             showHide(){  
                 return store.state.showMask;  
             }  
         },  
         store:store,  
         events:{  
               
         },  
         methods:{  
             parentjian(msg){  
                 console.log('child click:'+msg)  
             },  
             dosomething(msg){  
                 console.log(10);  
                 if(msg)  
                     console.log(msg)  
                 console.log(this.$children)  
             },  
             emitchild(msg){  
                 console.log(999)  
                 this.$emit('showMask',msg);  
             }  
         }  
     }  
 </script>  

Vue 2.0 废弃了 $broadcast 和 $dispatch，不过可以用 $children 访问子组件，或者通过 $refs 访问子组件，然后直接调用子组件的方法。
由于 events 实例选项属性已废弃，因此只能通过 created 钩子实现对自定义事件的监听，使用 this.$on 或者 this.$one。参见：
https://vuejs.org/v2/guide/mi...

组件中的v-on绑定自定义事件理解

每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
下面是一个例子：
这里写图片描述

Lucky_LXG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在vue2.0中父组件如何触发子组件的自定义方法？

如果我在父组件的button上绑定了click事件，我想当点击button时可以触发子组件(单文件的子组件xx.vue)的某个方法（如fn1），要这样的效果该怎样实现？之前看了vue1的文档实例里面有methods和events这两者有什么区别，为什么在vue2去掉dispatch后我用emit('fn'),如果fn放在events会没有响应，而放在methods里面才会被触发到？子组件：
复制链接

扫一扫

专栏目录