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

最新推荐文章于 2024-05-30 11:27:58 发布

下课。。。

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量194

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gaoxy666/article/details/129066117

版权

父组件

<template>
  <div>
    <TestCd :text="text" @textFun="textFun"></TestCd>    
  </div>
</template>

<script>
//引入子组件
import TestCd from "./testcd.vue"
export default {
  data() {
    return {
      text: "父组件的数据",
    };
  },
  components:{
    TestCd
  },
  methods: {
    textFun(obj) {
      console.log('父组件的方法',obj);
    },
  },
};
</script>
<style>
</style>

子组件

<template>
  <div @click="change">
      {{text}}
  </div>
</template>

<script>
export default {
  props:{
    text:String
  },
  methods:{
    change(){
      let obj={
        a:1,
        b:2
      }
      //第一个参是父组件的方法，第二个是需要传到父组件的数据
      this.$emit('textFun',obj)
    }
  }
}
</script>

<style>

</style>