vue 父组件调用子组件的函数

朴灿烈づ我的快乐病毒、 2021-12-10 14:37 344阅读 0赞

用法： 子组件上定义**ref="refName"**,  父组件的方法中用** this.$refs.refName.method **去调用子组件方法

详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要*先找到子组件对象 ，即  this.$refs.refName.*

*然后再进行调用，也就是** **this.$refs.refName.method*

*如下：*

*子组件：*

<template>
      <div>
        childComponent
      </div>
    </template>
     
    <script>
      export default {
        name: "child",
        methods: {
          childClick(e) {
            console.log(e)
          }
        }
      }
    </script>

父组件：

<template>
      <div>
        <button @click="parentClick">点击</button>
        <Child ref="mychild" />   //使用组件标签
      </div>
    </template>
     
    <script>
      import Child from './child';   //引入子组件Child
      export default {
        name: "parent",
        components: {
          Child    // 将组件隐射为标签
        },
        methods: {
          parentClick() {
            this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
          }
        }
      }
    </script>

来源：[https://www.cnblogs.com/renzm0318/p/8762129.html][https_www.cnblogs.com_renzm0318_p_8762129.html]

[https_www.cnblogs.com_renzm0318_p_8762129.html]: https://www.cnblogs.com/renzm0318/p/8762129.html

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue父组件调用子组件方法

组件 <template> <div> child </div> </template> <...

待我称王封你为后i/ 2024年04月17日 19:58/ 0 赞/ 91 阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 313 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 275 阅读

相关 Vue子组件调用父组件的方法

Vue中子组件调用父组件的方法，三种方法第一种方法是在子组件中通过this.$parent.event来调用父组件的方法父组件： <template

Dear 丶/ 2022年11月12日 09:47/ 0 赞/ 237 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 303 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 588 阅读

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

一般情况，我们从父组件向子组件传递数据会用props，子组件事件想在父组件中执行可以用$emit。现在父组件想用子组件里的一个方法，那怎么办？在父组件里首先得得到子组件对象

冷不防/ 2022年04月08日 10:10/ 0 赞/ 412 阅读

相关 vue子组件调用父组件方法

说明：有一个组件InputListSelect.vue，选中一个行数据，将该数据传送到父级ProjectEdit.vue文件中 1、父级ProjectEdit.vue调用

桃扇骨/ 2022年02月18日 14:21/ 0 赞/ 388 阅读

相关 vue 父组件调用子组件的函数

用法：子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法详解：父组件里面调用子组件的函数

朴灿烈づ我的快乐病毒、/ 2021年12月10日 14:37/ 0 赞/ 345 阅读

相关 vue 父组件调用子组件

1、在父组件里引用自组件 <generate-report @closeAddReport="closeAddReport" ref="addreport"><

谁借莪１个温暖的怀抱￠/ 2021年11月17日 09:02/ 0 赞/ 470 阅读