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

Question

如果我在父组件的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>

Answer 1

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

Answer 2

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

Answer 3

你好，请问最后是通过什么方法调用子组件的方法呢？