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

最新推荐文章于 2024-05-14 16:45:15 发布

barnett_y

最新推荐文章于 2024-05-14 16:45:15 发布

阅读量3.8k

点赞数

分类专栏：【Vue2.0-3.0点滴知识】

【Vue2.0-3.0点滴知识】专栏收录该内容

571 篇文章 61 订阅

订阅专栏

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

子组件：

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

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

父组件

<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 来监听子组件触发的事件。
下面是一个例子：
这里写图片描述

barnett_y

关注

0
点赞
踩
2

收藏

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

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

扫一扫