2019/06/06

在父组件中调用子组件的方法:

 1.给子组件定义一个ref属性。eg:ref="childItem"

 2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}

 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。

父组件:

<template>

<child-item ref='child' />

<button @click='useChildFun'></button>

</template>

<script>

```

methods() {

useChildFun:function(){

this.$refs.child.usedInPar('调用子组件中的方法');

}

}

</script>

子组件:

```

methods () {

usedInPar(str){

console.log(str);

}

}

没有完整的代码,只有一个用法

vue 父组件中调用子组件函数的更多相关文章

  1. React Hooks中父组件中调用子组件方法

    React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...

  2. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  3. vue父组件中调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...

  4. Vue父组件如何调用子组件(弹出框)中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  5. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  6. vue父组件如何调用子组件的属性或方法

    常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢? 子组件child <template> <div> {{msg}} </div& ...

  7. (转)C#在父窗口中调用子窗口的过程(无法访问已释放的对象)

    C#在父窗口中调用子窗口的过程: 1. 创建子窗口对象 2. 显示子窗口对象   笔者的程序中,主窗体MainFrm通过菜单调用子窗口ChildFrm.在窗体中定义了子窗口对象,然后在菜单项点击事件中 ...

  8. C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常,不存在从对象类型System.Windows.Forms.DateTimePicker到已知的托管提供程序本机类型的映射。

    一:C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常 其实,这个问题与C#的垃圾回收有关.垃圾回收器管 理所有的托管对象,所有需要托管数据的.NET语言(包括 C#)都受运行库的 垃圾回收器 ...

  9. vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image"> <uploadImg :width="150" ...

随机推荐

  1. 解决VS+Qt不生成moc文件问题

    使用VS的Qt插件进行Qt开发时,有时候会遇到不能生成moc文件的问题. 1.在工程中可以看到这个Generated files目录下是有一个看似moc文件的文件,双击打开的话: 如果能正常打开,文件 ...

  2. 关于inflate的第3个参数

    关于inf 方法 inflate(int resource, ViewGroup root, boolean attachToRoot) 中,前连个参数都好理解,我比较费解的是第3个参数. 文档中的解 ...

  3. 13 -1 BOM和定时器

    一 BOM JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元 ...

  4. 深度解读Helm 3: 犹抱琵琶半遮面

    自去年年初开始放风Helm v3将要开始开发,到去年年底KubeConn 上海被一堆人追问到底啥时候发版本.今年五月份,Helm v3 终于发布了第一个alpha版本,让我们来一窥新版本的Helm 到 ...

  5. git init之后,没有.git后缀的文件

    git init之后,打开相关目录没有.git后缀的文件 尝试

  6. OpenStack☞HTTP协议

    前言 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准 HTTP是一个基于TCP/IP通信协议 ...

  7. behavior planning——inputs to transition functions

    the answer is that we have to pass all  of the data into transition function except for the previous ...

  8. autocomplete="off" inpu属性

    input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值 很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到 可以在input中加入auto ...

  9. rcGIS API for JavaScript之基础篇(一)

    ArcGIS API for JavaScript之基础篇(一)上一篇文章介绍了ArcGIS 10.4的安装指南也包含了所需要资源,需要的同学可以去公众号中查找.最近几天学习了2D地图.3D地图以及图 ...

  10. python基础之内置装饰器

    装饰器 简介 功能与格式 内置装饰器 @classmethod @propertry @staticmethod 其它 ---------------------------------------- ...