尽管有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. [bzoj1787][Ahoi2008]Meet 紧急集合(lca)

    传送门 可以看出,三个点两两之间的lca会有一对相同,而另一个lca就是聚集点. 然后搞搞就可以求出距离了. ——代码 #include <cstdio> #include <cst ...

  2. Android应用的权限配置和权限列表

    权限配置写在Mainifest.xml文件中: <?xml version="1.0" encoding="utf-8"?> <manifes ...

  3. 【HDOJ6298】Maximum Multiple(数论)

    题意:给定n,求x,y,z三个整数,使得x|n,y|n,z|n,且xyz最小 n<=1e6 思路: 不定方程1/x+1/y+1/z=1 只有(2,3,6)(2,4,4) (3,3,3)三组正整数 ...

  4. ASP.NET程序开发中经典常用的三十三种代码实例[确实有用]

    原文发布时间为:2008-11-10 -- 来源于本人的百度文章 [由搬家工具导入] ASP.NET程序开发中经典常用的三十三种代码实例:1. 打开新的窗口并传送参数: 传送参数:response.w ...

  5. IP聚合 ---百度之星(与运算)

    Problem Description 当今世界,网络已经无处不在了,小度熊由于犯了错误,当上了度度公司的网络管理员,他手上有大量的 IP列表,小度熊想知道在某个固定的子网掩码下,有多少个网络地址.网 ...

  6. Spring中实现自定义事件

    原理: 通过扩展ApplicationEvent,创建一个事件类CustomEvent.这个类必须定义一个默认的构造函数,它应该从ApplicationEvent类中继承的构造函数. 一旦定义事件类, ...

  7. [Unit Testing] Mock an HTTP request using Nock while unit testing

    When testing functions that make HTTP requests, it's not preferable for those requests to actually r ...

  8. 配置activeMQ

    一.加入以下的库 并配置好路径 ws2_32.lib;Mswsock.lib;cppunit.lib;libapr-1.lib;libapriconv-1.lib;libaprutil-1.lib;l ...

  9. Android中的图片查看器

    本案例,使用Eclipse来开发Android2.1版本号的图片查看器. 1)首先,打开Eclipse.新建一个Android2.1版本号的项目ShowTu,打开res/values中文件夹下的str ...

  10. poj 1840 哈希

    Eqs Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 14093   Accepted: 6927 Description ...