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

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

子组件:

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

回答:

vue2 可以直接在父组件中使用this.$refs访问子组件并调用其接口,比如this.$refs.child.childFn()

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注