尽管有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. 【记录】新建Cordova项目出现ios-deploy找不到的问题

    按老流程 Cordova create helloApp Cordova platform add ios 之前一般这种操作之后就能有执行的iOS目录了,像这样   然后 Cordova build ...

  2. Substrings--poj1226(字符串)

    Description You are given a number of case-sensitive strings of alphabetic characters, find the larg ...

  3. Spring4 基本使用

    前言 虽然现在基本上是 springboot 的天下了,但是传统的 spring4 在广大的软件企业中仍然占据很大比例.一上手能用,但是要让我从无到有搭一个spring4的开发环境出来,可能会磕磕碰碰 ...

  4. 转:TLV 格式及编解码示例

    TLV是一种可变格式,意思就是: Type类型, Lenght长度,Value值: Type和Length的长度固定,一般那是2.4个字节(这里统一采用4个字节): Value的长度有Length指定 ...

  5. js的基础(平民理解的执行上下文/调用堆栈/内存栈/值类型/引用类型)

    与以前的切图比较,现在的前端开发对js的要求似乎越来越高,在开发中,我们不仅仅是要知道如何运用现有的框架(react/vue/ng), 而且我们对一些基础的知识的依赖越来越大. 现在我们就用平民的方法 ...

  6. 解决Win7 64bit + VS2013 使用opencv时出现提“应用程序无法正常启动(0xc000007b)”错误

    应用程序无法正常启动(0xc000007b) 记得以前也遇到过这样的问题:网上的解决方法就是修复什么 今天配置opencv2.4.8+vs2013的时候,发现用老版本的程序是不是都会出现这样的现象啊! ...

  7. VB和VB.NET有什么区别

    作为VB6.0的后续版本,VB.NET更加稳定,而且完全面向对象.也许你还记得,VB6.0部支持继承.重载和接口,所以不是真正面向对象的.而VB.NET则支持这些面向对象特性.VB6.0有两个薄弱环节 ...

  8. 【Mongodb教程 第八课 】MongoDB 更新文档

    MongoDB的 update() 和 save() 方法用于更新文档的集合. update()方法更新现有的文档值,而替换现有的文档通过的文件中 save() 方法. MongoDB Update( ...

  9. 【Mongodb教程 第二课 】 MongoDB 创建数据库 use 命令

    use 命令 MongoDB use DATABASE_NAME 用于创建数据库.该命令将创建一个新的数据库,如果它不存在,否则将返回现有的数据库. 语法: use DATABASE 语句的基本语法如 ...

  10. Atitit. 软件GUIbutton与仪表盘--webserver区--获取apache配置文件路径 linux and apache的启动、停止、重新启动

    Atitit.   软件GUIbutton与仪表盘--webserver区--获取apache配置文件路径 linux and apache的启动.停止.重新启动 能够通过"netstat  ...