美文网首页
vue 父组件调用子组件内部方法

vue 父组件调用子组件内部方法

作者: 798b6b7c244d | 来源:发表于2019-11-04 18:45 被阅读0次

父组件:

<template>
    <div>
        <Ls ref="toChild" ></Ls>
        <Button @click="toChild">父亲</Button>
    </div>
</template>
<script>
      export default {
          components: {
              Ls,
          },
          methods: {
              toChild() {
                  this.$refs.toChild.$emit('callMethod1') // 方法1
                  this.$refs.toChild.callMethod() // 方法2
              }
          }
      }
</script>

子组件:

<template>
    <div>
        hahaha
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    mounted () {
      this.$nextTick(function () {
        this.$on('callMethod1', function () {
          console.log('监听成功')
        })
      })
    },
    methods: {
        callMethod () {
          console.log('调用成功')
        }
    }
}
</script>
<style scoped>

</style>

小伙伴快去试下吧

相关文章

网友评论

      本文标题:vue 父组件调用子组件内部方法

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