美文网首页Vue
vue中父组件调用子组件里的方法

vue中父组件调用子组件里的方法

作者: 明灭_ | 来源:发表于2018-11-28 21:43 被阅读0次

    vue的子组件 Child 中定义了一个方法 childFn() ,现在想要在父组件 Parent 中调用这个方法,代码如下:

    子组件:

    <tenmplate>
      <div class="child">
        ...
      </div>
    </template>
    
    <scrtipt>
    export default {
      methods: {
        childFn() {
          console.log('我是子组件的方法');
        }
      }
    }
    </script>
    

    父组件:

    <tenmplate>
      <div class="parent">
        <v-child ref="child"></v-child>
      </div>
    </template>
    
    <scrtipt>
    import Child from './Child/Child.vue';
    
    export default {
      components: {
        [
          'v-child': Child
        ]
      },
      methods: {
        parentFn() {
          this.$refs.child.childFn(); // 调用子组件的childFn()方法
        }
      }
    }
    </script>
    

    (注意:子组件不能调用父组件的方法)

    相关文章

      网友评论

        本文标题:vue中父组件调用子组件里的方法

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