vue子组件调用父组件方法

简介: vue子组件调用父组件方法

强迫学习的东西是不会保存在心里的。——《柏拉图论教育》

首先我们在子组件中这样定义

<template>
  <div>
    <el-button @click="callSuper">123</el-button>
  </div>
</template>
<script>
export default {
  methods: {
    callSuper() {
      this.$emit('parentEvent', '我的');
    }
  }
};
</script>

这里的组件就只有一个el-button,点击后执行callSuper函数

里面这行this.$emit('parentEvent', '我的');表示

调用在父组件 引用子组件时 传入的事件

例如我这里调用了parentEvent,传入了个“我的”作为参数

然后这样我们在 引用子组件 的时候就需要这样写

<template>
  <div>
    <hello-world @parentEvent="toYoung"></hello-world>
  </div>
</template>
<script>
import HelloWorld from '../../../components/HelloWorld.vue';
export default {
  components: { HelloWorld },
  methods: {
    toYoung(msg) {
      console.log(msg);
    }
  }
};
</script>

这里定义@parentEvent事件,然后传入toYoung函数作为参数

这样就实现了子组件点击时触发父组件方法

相关文章
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
JavaScript
Vue子组件监听父组件的事件
Vue子组件监听父组件的事件
685 0
Vue子组件监听父组件的事件
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript
vue知识点
vue知识点
7 2
|
9天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
30 9