尽管有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的更多相关文章

  1. vue子组件通知父组件使用方法

    vue子组件通知父组件使用方法 <template> <mt-field placeholder="验证码" v-model="getverifycod ...

  2. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  3. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  4. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  5. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  6. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

  7. vue 子组件引用

    使用 ref 为子组件指定一个引用 ID.例如: <div id="parent"> <user-profile ref="profile"& ...

  8. Vue 子组件接收父组件的值

    1.父组件 <template> <div id="rightmenu8"> <rightmenu7 ref="rightmenu7&quo ...

  9. vue-父子组件和ref

    父组件向子组件传值 <div id="app"> <!-- 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的 ...

随机推荐

  1. TYVJ P 1214 硬币问题

    TYVJ  P 1214 硬币问题 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述   有n种硬币,面值为别为a[1],a[2],a[3]……a[n],每种都 ...

  2. 转载:用vector保存对象时保存指针的优点, 以及reserve的使用

    #include <vector> #include <stdio.h> class A { public: A() { printf("A()/n"); ...

  3. Kibana 可视化监控报警插件 KAAE 的介绍与使用

    https://blog.csdn.net/phachon/article/details/53424631 https://blog.csdn.net/Dragon714/article/detai ...

  4. python学习之 -- 数据序列化

    json / pickle 数据序列化 序列化定义:把变量从内存中变成可存储或传输的过程称为序列化.反序列化:把变量内容从序列化的对象重新读到内存里称为反序列胡. 序列化模块之--pickle使用注意 ...

  5. THUPC2018看题总结

    THUPC2018看题总结 #6387. 「THUPC2018」绿绿与串串 / String 据说是签到题啊. 首先根据题目的意思,我们发现如果能找到那个最后一次选择的对称轴岂不是美滋滋. 自然地,我 ...

  6. poj——2239 Selecting Courses

    poj——2239   Selecting Courses Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10656   A ...

  7. MongoDB学习day08--Mongoose索引、Mongoose内置方法、扩展Mongoose Model的静态方法和实例方法

    一.Mongoose索引 索引是对数据库表中一列或多列的值进行排序的一种结构, 可以让我们查询数据库变得更快. MongoDB 的索引几乎与传统的关系型数据库一模一样, 这其中也包括一些基本的查询优化 ...

  8. canvas仿芝麻信用分仪表盘

    这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id= ...

  9. Find Minimum in Rotated Sorted Array 旋转数组中找最小值 @LeetCode

    O(n)的算法就不说了,这题主要考查的是 O(logn)的算法. 有序数组easy想到使用二分查找解决.这题就是在二分基础上做一些调整.数组仅仅有一次翻转,能够知道原有序递增数组被分成两部分,这俩部分 ...

  10. Linux的基本优化

    归结成口诀: 一清.一精.一增.两优.四设.七其他 一清: 定时清理日志/var/spool/clientsqueue 一精: 精简开机启动服务 一增: 增大文件描述符 两优: linux内核参数的优 ...