vue 父组件中调用子组件函数
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 父组件中调用子组件函数的更多相关文章
- React Hooks中父组件中调用子组件方法
React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- vue父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...
- Vue父组件如何调用子组件(弹出框)中的方法的问题
如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- vue父组件如何调用子组件的属性或方法
常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢? 子组件child <template> <div> {{msg}} </div& ...
- (转)C#在父窗口中调用子窗口的过程(无法访问已释放的对象)
C#在父窗口中调用子窗口的过程: 1. 创建子窗口对象 2. 显示子窗口对象 笔者的程序中,主窗体MainFrm通过菜单调用子窗口ChildFrm.在窗体中定义了子窗口对象,然后在菜单项点击事件中 ...
- C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常,不存在从对象类型System.Windows.Forms.DateTimePicker到已知的托管提供程序本机类型的映射。
一:C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常 其实,这个问题与C#的垃圾回收有关.垃圾回收器管 理所有的托管对象,所有需要托管数据的.NET语言(包括 C#)都受运行库的 垃圾回收器 ...
- vue父组件中获取子组件中的数据
<FormItem label="上传头像" prop="image"> <uploadImg :width="150" ...
随机推荐
- Leetcode747.Largest Number At Least Twice of Others至少是其他数字两倍的最大数
在一个给定的数组nums中,总是存在一个最大元素 . 查找数组中的最大元素是否至少是数组中每个其他数字的两倍. 如果是,则返回最大元素的索引,否则返回-1. 示例 1: 输入: nums = [3, ...
- android performance
https://developer.android.com/studio/profile/systrace.html http://www.milan100.com/article/show/1544 ...
- Codeforces 425A
点击打开题目链接 这题想了将近一天..越发觉得自己太弱(不过早已经习惯这样的自己了 :P)不过因为是自己独立想出来的,还是很高兴. 拿到题目,当看到数据量的时候,就感觉很明显的暴力. n×n×n×k也 ...
- hdu 3466 01背包变形【背包dp】
http://acm.hdu.edu.cn/showproblem.php?pid=3466 有两个物品P,Q,V分别为 3 5 6, 5 10 5,如果先dp第一个再dp第二个,背包容量至少要为3+ ...
- TZOJ 4471: Postman FJ (二分+bfs)
描述 FJ now is a postman of a small town in the hills. The town can be represented by a N×N matrix. Ea ...
- 在dva框架和create-react-app创建出来的框架中修饰器语法与按需加载引入antd分别配置
按需加载需要的包 babel-plugin-import 装饰器语法需要的包 @babel/plugin-proposal-decorators dva框架 将.webpackrc 改成. ...
- 【NS2】学习点滴
1 $ns duplex-link-op $n2 $n3 queuePos 0.5#此命令用于设置在NAM中显示的队列方向#经测试,发现: # queuePos 0.5表示包从上到下进入队列# que ...
- Unity3dShader学习合集暂存
http://www.cnblogs.com/flappy/archive/2012/08/10/2631348.html 1. Unity3d的參考手冊, 里面涵盖Unity3d官方的描写叙述 ht ...
- Java练习 SDUT-1255_小明A+B
小明A+B Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小明今年3岁了, 现在他已经能够认识100以内的非负整数, ...
- 设置select和option的文字居中
select{ width: auto; padding: 0 1%; //左右一定要设置 margin: 0; } option{ text-align:center; }