vue 子组件触发父组件的方法

最新推荐文章于 2023-11-02 11:20:45 发布

原创最新推荐文章于 2023-11-02 11:20:45 发布 · 444 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue笔记专栏收录该内容

2 篇文章

订阅专栏

博客介绍了Vue的两种方法，但未详细说明方法具体内容。

方法一：

<template>//子组件
    <button @click="submit">提交</button>
</template>
<script>
export default {
  methods: {
    submit: function () {
      // 子组件中触发父组件方法并传值
      this.$emit('parentf', 'xxxx')
    }
  }
}
</script>

<template>//父组件
    <child @parentf="parentf"></child>
</template>
<script>
export default {
  methods: {
    parentf: function (str) {
      alert(str)
    }
  }
}
</script>

方法二：

<template>//子组件
    <button @click="submit">触发父方法</button>
</template>
<script>
export default {
  props: {
    parentF: {
      type: Function,
      default: null
    }
  },
  methods: {
    submit: function () {
      if (this.parentF) {
        this.parentF(‘xxxx’)
      }
    }
  }
}
</script>

<template>//父组件
    <child :parentF="parentF"></child>
</template>
<script>
export default {
  methods: {
    parentF: function (str) {
      alert(str)
    }
  }
}
</script>