赞
赏
在 Vue 中,子组件默认是无法访问父组件中的方法的。
要实现子组件可以访问父组件中的方法,父组件可以在引用子组件的时候,通过事件绑定的形式把需要传递给子组件的方法传递过去 。
<body>
<div id="app">
<com2 @func="show"></com2>
</div>
<template id="tmp1">
</template>
</body>
<script type="text/javascript">
var com2 = {
template:'#tmp1',
methods:{
myclick() {
this.$emit('func');
}
}
}
var vm = new Vue({
el : '#app',
methods: {
show() {
console.log('调用了父组件身上的show方法')
}
},
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',
methods:{
myclick() {
//emit 表示触发的意思
this.$emit('func');
}
}
}
var vm = new Vue({
el : '#app',
methods: {
show() {
console.log('调用了父组件身上的show方法')
}
},
components: {
com2
}
});
</script>
</html>
浏览器运行效果,如下图所示:
我们在父组件中,引用子组件 com2 的时候,通过事件绑定的形式将父组件的 show 方法传递以 key 为 show 的形式传递给子组件。
接着,我们在子组件的 methods 中,可以通过 emit 来调用父组件传递过来的方法。
在 Vue 中,子组件默认是无法访问父组件中的方法的。
要实现子组件可以访问父组件中的方法,父组件可以在引用子组件的时候,通过事件绑定的形式把需要传递给子组件的方法传递过去 。