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

2023-06-11 06:27:44

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

子组件：

[html]

view plain copy print ?

<!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;    </span></span></li><li class=""><span>//      child.greet();    </span></li><li class="alt"><span>    new Vue({  </span></li><li class=""><span>        el:"#parent",  </span></li><li class="alt"><span>        data:{  </span></li><li class=""><span>            msg:""  </span></li><li class="alt"><span>        },  </span></li><li class=""><span>        methods: {  </span></li><li class="alt"><span>                clickDt(){  </span></li><li class=""><span>                this.
// child.greet();
new Vue({
el:"#parent",
data:{
msg:""
},
methods: {
clickDt(){
this.refs.profile.greet(this.msg);
}
}
})
</script>
</body>
</html>

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

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

[javascript]

view plain copy print ?

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

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

父组件

[javascript]

view plain copy print ?

<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)  </span></span></li><li class="alt"><span>            },  </span></li><li class=""><span>            emitchild(msg){  </span></li><li class="alt"><span>                console.log(999)  </span></li><li class=""><span>                <span class="keyword">this</span><span>.
},
emitchild(msg){
console.log(999)
this.emit(‘showMask’,msg);
}
}
}
</script>

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

<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</code>&nbsp;和&nbsp;<code style="font-family:&quot;Source Code Pro&quot;,monospace; padding:2px 4px; font-size:13.3333px; color:rgb(63,63,63); white-space:nowrap">$emit

不是

addEventListener

和

dispatchEvent

的别名。

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

下面是一个例子：

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

上一篇: vue 快捷轮播组件代码实现

下一篇: vue组件的路由高亮问题vue组件的路由高亮问题

继续阅读