vue 子组件 索引 ref
尽管有props和events,但是有时任然需要在javascript中直接访问子组件。为此可是使用ref为子组件指定一个索引ID.
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
当 ref 和 v-for 一起使用时, ref 是一个数组或对象,包含相应的子组件。
$refs 只在组件渲染完成之后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案---应当避免在模板或者计算属性中使用$refs
vue 子组件 索引 ref的更多相关文章
- vue子组件通知父组件使用方法
vue子组件通知父组件使用方法 <template> <mt-field placeholder="验证码" v-model="getverifycod ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
- vue 子组件引用
使用 ref 为子组件指定一个引用 ID.例如: <div id="parent"> <user-profile ref="profile"& ...
- Vue 子组件接收父组件的值
1.父组件 <template> <div id="rightmenu8"> <rightmenu7 ref="rightmenu7&quo ...
- vue-父子组件和ref
父组件向子组件传值 <div id="app"> <!-- 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的 ...
随机推荐
- [HDU3065]病毒持续侵袭中(AC自动机)
传送门 AC自动机的又一模板,统计每个字符串在文本中的次数. 所以就不需要vis数组了. ——代码 #include <cstdio> #include <cstring> # ...
- SPOJ1812 - Longest Common Substring II(LCS2)
Portal,Portal to 洛谷 Description 给出\(n(n\leq10)\)个仅包含小写字母的字符串\(s_1..s_n(|s_i|\leq10^5)\),求这些字符串的最长公共子 ...
- 【模拟】2017 Multi-University Training Contest 1 The Battle of Chibi
acm.hdu.edu.cn/showproblem.php?pid=5542 [Accepted] #include<iostream> #include<cstdio> # ...
- BZOJ1698: [Usaco2007 Feb]Lilypad Pond 荷叶池塘
一傻逼题调了两天.. n<=30 * m<=30的地图,0表示可以放平台,1表示本来有平台,2表示不能走,3起点4终点,走路方式为象棋的日字,求:从起点走到终点,至少要放多少平台,以及放平 ...
- msp430项目编程
msp430中项目---LED数码管显示 1.数码管介绍 2.代码(直接使用引脚驱动) 3.代码(使用译码器驱动) 4.项目总结 msp430项目编程 msp430入门学习
- hdu - 5074 Hatsune Miku (简单dp)
有m种不同的句子要组成一首n个句子的歌,每首歌都有一个美丽值,美丽值是由相邻的句子种类决定的,给出m*m的矩阵map[i][j]表示第i种句子和第j种句子的最大得分,一首歌的美丽值是由sum(map[ ...
- ORA-01034: ORACLE not available 出错
调用db.rlogon("sm/sm")出现以下错误 ORA-01034: ORACLE not availableORA-27101: shared memory realm d ...
- Spring Boot项目错误:Error parsing lifecycle processing instructions
pom.xml文件错误:Error parsing lifecycle processing instructions 解决方法:清空.m2/repository下的所有依赖文件,重新下载即可解决该问 ...
- CSS布局之BFC和IFC
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...
- zmq.error.ZMQError: Address already in use
1.如下代码,启动的时候python app.py会报如题的错误 app.py #!/user/bin python # -*- coding:utf-8 -*- import os from dat ...