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

Vue 子组件调用实例方法

作者: 伍源辉 | 来源:发表于2017-02-07 17:37 被阅读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>
    

    相关文章

      网友评论

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

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