Vue 子组件调用实例方法
2017-02-07 本文已影响180人
伍源辉
<div id="app">
<child v-on:evn="appMethod"></child>
<child v-on:evn="otherAppMethod"></child>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script type="application/javascript">
Vue.component('child', {
template: '<button @click="childMethod">click</button>',
methods: {
childMethod: function () {
// 触发 evn 参数中传入的值(即父组件方法名)
this.$emit('evn');
console.log('call child method success!');
}
},
})
new Vue({
el: '#app',
methods: {
// 定义方法,用于子组件中触发调用
appMethod: function () {
console.log('call app method success!');
},
otherAppMethod: function () {
console.log('call other app method success!');
},
}
})
</script>