Vue父组件向子组件传方法

Vue父组件向子组件传方法教程

在 Vue 中，子组件默认是无法访问父组件中的方法的。

要实现子组件可以访问父组件中的方法，父组件可以在引用子组件的时候，通过事件绑定的形式把需要传递给子组件的方法传递过去。

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>

案例

Vue父组件向子组件传方法

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

浏览器运行效果，如下图所示：

15 vue component parent func.png

我们在父组件中，引用子组件 com2 的时候，通过事件绑定的形式将父组件的 show 方法传递以 key 为 show 的形式传递给子组件。

接着，我们在子组件的 methods 中，可以通过 emit 来调用父组件传递过来的方法。

Vue父组件向子组件传方法总结

在 Vue 中，子组件默认是无法访问父组件中的方法的。

要实现子组件可以访问父组件中的方法，父组件可以在引用子组件的时候，通过事件绑定的形式把需要传递给子组件的方法传递过去。