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

2019-11-04  本文已影响0人  798b6b7c244d

父组件:

<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>

小伙伴快去试下吧

上一篇 下一篇

猜你喜欢

热点阅读