尽管有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. 关于系统中使用多个PropertyPlaceholderConfigurer的配置

    多数的鲜为人知方法都是因为有着罕见的应用,就比如说Spring中PropertyPlaceholderConfigurer这个类,它是用来解析Java Properties属性文件值,并提供在spri ...

  2. Python基础之 一 文件操作

    文件操作 流程: 1:打开文件,得到文件句柄并赋值给一个变量 2:通过句柄对文件进行操作 3:关闭文件 模式解释 r(读) , w(写) ,a(附加)r+(读写的读), w+(读写的写),a+(读附加 ...

  3. Java开发笔记(一百)线程同步synchronized

    多个线程一起办事固然能够加快处理速度,但是也带来一个问题:两个线程同时争抢某个资源时该怎么办?看来资源共享的另一面便是资源冲突,正所谓鱼与熊掌不可兼得,系统岂能让多线程这项技术专占好处?果然是有利必有 ...

  4. linux signal 列表

    Linux 信号表   Linux支持POSIX标准信号和实时信号.下面给出Linux Signal的简表,详细细节可以查看man 7 signal. 默认动作的含义如下: Term    终止进程 ...

  5. ORA-01034: ORACLE not available 出错

    调用db.rlogon("sm/sm")出现以下错误 ORA-01034: ORACLE not availableORA-27101: shared memory realm d ...

  6. Spring Boot项目错误:Error parsing lifecycle processing instructions

    pom.xml文件错误:Error parsing lifecycle processing instructions 解决方法:清空.m2/repository下的所有依赖文件,重新下载即可解决该问 ...

  7. 细说分布式Redis架构设计和踩过的那些坑

    细说分布式Redis架构设计和踩过的那些坑_redis 分布式_ redis 分布式锁_分布式缓存redis 细说分布式Redis架构设计和踩过的那些坑

  8. 微服务 Framework

    Dubbo :https://github.com/dubbo Spring Cloud :https://github.com/spring-cloud

  9. eclipse需要的环境变量就两个,一个是java_home指向JDK。另一个是Tomcat,自己去preference-sever下new一个

    1.eclipse需要的环境变量就两个,一个是java_home指向JDK.另一个是Tomcat,自己去preference-sever下new一个

  10. JVM监控工具:jps、jstat、jinfo、jmap、jhat、jstack使用介绍

    转载:http://outofmemory.cn/java/jvm/jvm-tools-jps-jstat-jinfo-jmap-jhat-jstack 一.jps(JVM Process Statu ...