如果我在父组件的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 来监听子组件触发的事件。 下面是一个例子：
