vue.js 父组件如何触发子组件中的方法

小咪咪 2023-06-13 06:02 18阅读 0赞

### 示例 ###

###        子组件 ###

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

###       父组件 ###

<template>
      <div>
        <button @click="clickParent">点击</button>
        <child ref="mychild"></child>
      </div>
    </template>
     
    <script>
      import Child from './child';
      export default {
        name: "parent",
        components: {
          child: Child
        },
        methods: {
          clickParent() {
            this.$refs.mychild.parentHandleclick("嘿嘿嘿");
          }
        }
      }
    </script>

### 注意： ###

1、在子组件中：<div></div>是必须要存在的

2、在父组件中：首先要引入子组件 import Child from './child';

3、 <child ref="mychild"></child>是在父组件中为子组件添加一个占位，ref="mychild"是子组件在父组件中的名字

4、父组件中 components: \{　　是声明子组件在父组件中的名字

5、*在父组件的方法中调用子组件的方法，很重要*   this.$refs.mychild.parentHandleclick("嘿嘿嘿");

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue - Vue 路由 - 组件通信 —＞父组件 —＞子组件的参数传值、父组件触发子组件的函数

一、Vue 路由 —＞父组件 —＞子组件的参数传值序言笔者遇到了一个比较特殊的设计要求，从 Vue 路由传递某个参数给某个组件，然后在使用这个父组件将这个参数

缺乏、安全感/ 2024年03月16日 11:58/ 0 赞/ 62 阅读

相关 vue.js 父组件如何触发子组件中的方法

示例子组件 <template> <div> child </div> </template

小咪咪/ 2023年06月13日 06:02/ 0 赞/ 19 阅读

相关 vue 中父子组件传值，以及子组件调用父组件方法，父组件调用子组件方法

先创建子组件创建一个分页的子组件 <template> <div> <el-pagination bac

喜欢ヅ旅行/ 2022年12月16日 09:07/ 0 赞/ 219 阅读

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

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

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

相关 angular4中父组件如何调用子组件的方法

一、新建一个子组件 ng g component child 二、子组件中添加要被调用的方法 child.component.ts export

梦里梦外;/ 2022年05月26日 04:17/ 0 赞/ 143 阅读

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

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

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

相关 vue 子组件调用、触发父组件中的方法

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 我发现了两种写法。方法一：子组件：

深碍√TFBOYSˉ_/ 2022年04月02日 10:56/ 0 赞/ 282 阅读

相关 Vue入门-子组件向父组件通信与父组件调用子组件中的方法

子组件向父组件通信 > 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), > > 该方法在子组件的methods中声明,实现功能th

太过爱你忘了你带给我的痛/ 2021年09月15日 14:22/ 0 赞/ 511 阅读

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

用$ref调用直接代码：子组件： <template> <div> </div> </templa

╰半夏微凉°/ 2021年09月15日 06:16/ 0 赞/ 407 阅读

相关 Vue - 子组件如何调用父组件中的方法

子组件调用父组件的三种方法一. 子组件里用$emit向父组件触发一个事件，父组件监听这个事件二. 子组件通过使用this.$parent.e

我不是女神ヾ/ 2021年07月26日 00:33/ 0 赞/ 979 阅读