如果我在父组件的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...
每个 Vue 实例都实现了事件接口(Events interface),即:
使用 $on(eventName)
监听事件
使用 $emit(eventName)
触发事件
Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on
和 $emit
不是addEventListener
和 dispatchEvent
的别名。
另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
下面是一个例子: