美文网首页
Vue 子组件调用实例方法2

Vue 子组件调用实例方法2

作者: 伍源辉 | 来源:发表于2017-02-07 18:16 被阅读57次
<div id="app">
  <child :method="appMethod"></child>
  <child :method="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>',
      props: ['method'],
      methods: {
        childMethod: function(){
          this.method();
          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>

相关文章

网友评论

      本文标题:Vue 子组件调用实例方法2

      本文链接:https://www.haomeiwen.com/subject/uhemittx.html