在 Vue 中,子组件默认是无法访问父组件中的方法的。要实现子组件可以访问父组件中的方法,父组件可以在引用子组件的时候,通过事件绑定的形式把需要传递给子组件的方法传递过去 。
在传递方法的同时,我们也可以通过在使用 emit 的时候,传递参数进行调用。
<body>
<div id="app">
<com2 @func="show"></com2>
</div>
<template id="tmp1">
</template>
</body>
<script type="text/javascript">
var com2 = {
template:'#tmp1',
data() {
return {
}
},
methods:{
myclick() {
this.$emit('func', this.msg);
}
}
}
var vm = new Vue({
el : '#app',
methods: {
show(data) {
}
},
components: {
com2
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Vue父组件向子组件传递方法</title>
<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件向子组件传递方法使用的是事件绑定机制 v-on ,当我们自定义一个事件属性之后,那么,子组件就能够通过某些方式来调用传递进去的这个方法-->
<com2 @func="show"></com2>
<p>嗨客网(www.haicoder.net)</p>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="子组件的按钮" @click="myclick"></input>
</div>
</template>
</body>
<script type="text/javascript">
var com2 = {
template:'#tmp1',
data() {
return {
msg:{
name:'嗨客网',
module:'Vue'
}
}
},
methods:{
myclick() {
//emit 表示触发的意思
this.$emit('func', this.msg);
}
}
}
var vm = new Vue({
el : '#app',
methods: {
show(data) {
console.log('调用了父组件身上的show方法: --- ' + data.name + ' ' + data.module)
}
},
components: {
com2
}
});
</script>
</html>
浏览器运行效果,如下图所示:
我们在父组件中,引用子组件 com2
的时候,通过事件绑定的形式将父组件的 show
方法传递以 key
为 show
的形式传递给子组件。
接着,我们在子组件的 methods
中,可以通过 emit 来调用父组件传递过来的方法,同时 emit 可以支持参数的传递。
在 Vue 中,子组件默认是无法访问父组件中的方法的。要实现子组件可以访问父组件中的方法,父组件可以在引用子组件的时候,通过事件绑定的形式把需要传递给子组件的方法传递过去 。
在传递方法的同时,我们也可以通过在使用 emit 的时候,传递参数进行调用。