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

最新推荐文章于 2022-04-03 19:50:27 发布

「已注销」

最新推荐文章于 2022-04-03 19:50:27 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/wintersweetGirl/article/details/81509024

版权

第一种方法：

this.$parent.fn;

父页面中

methods:{
    open(params){
        //....
    }
}

子页面中直接this.$parent.open(params)即可调用

第二种方法：

子组件

<template>
    <button @click="onclick">点击</button>
</template>
<script>
export default {
  props: {
    parentclick: {
      type: Function,
      default: null
    }
  },
  methods: {
    onclick() {
      if (this.parentclick) {
        this.parentclick("123")
      }
    }
  }
}
</script>

父组件

<template>
    <div>
          <button @click="open"></button>
          <children="editor" :parentclick="open"></children>
    </div>
    
</template>
<script>
export default {
  methods: {
    open(val) {
      console.log(val)
    }
  }
}
</script>