Vue 调用子组件方法
作者:
伍源辉 | 来源:发表于
2017-02-07 16:38 被阅读1783次<div id="app">
<child ref="child"></child>
<button @click="callChildMethod">
callChildMethod
</button>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script type="application/javascript">
Vue.component('child', {
template: '<div></div>',
methods: {
// 定义方法用于父实例调用
childMethod() {
console.log('call child method success!');
}
}
});
new Vue({
el: '#app',
methods: {
callChildMethod() {
console.log('call app method success!');
// 通过 refs 找到子组件后直接调用方法
this.$refs.child.childMethod();
}
}
})
</script>
本文标题:Vue 调用子组件方法
本文链接:https://www.haomeiwen.com/subject/znkmittx.html
网友评论