使用 ref 为子组件指定一个引用 ID。例如:

<div id="parent">
<user-profile ref="profile"></user-profile>
</div>

引用子组件:

var parent = new Vue({ el: '#parent' })
// 访问子组件实例
var child = parent.$refs.profile

$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs

此方案可以用来父子通信

vue 子组件引用的更多相关文章

  1. vue父组件引用子组件方法显示undefined问题原因及解决方法

    关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...

  2. vue.js 组件引用之初级 之二

    1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...

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

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

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

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

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

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

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

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

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

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

  8. vue父组件引用多个相同的子组件传值

    没有什么问题是for 解决不了的,我一直深信这句话,当然这句话也是我说的 父组件引用多个相同的子组件传值问题 (这种情况很少遇到) 1 <template> 2 <div> 3 ...

  9. vue.js 组件引用之初级

    1. 构造组件,及组件引用:1.1 构造一个组件,1.2 注册一个组件,1.3  实例化Vue()即引用Vue() <!DOCTYPE html> <html lang=" ...

随机推荐

  1. py2exe使用方法 (含一些调试技巧,如压缩email 类)(转)

    一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...

  2. static关键字与方法区和类加载

    1.static的作用 答:将成员变量或方法存储进方法区.因为方法区能保证数据只存在一份,只会加载一次(类加载器加载类的时候才加载一次) 注:static Object obj = new Objec ...

  3. nginx重启命令方法(linux,centos,ubuntu)总结

    原文:http://www.111cn.net/sys/nginx/62915.htm 平滑重启 如果服务器正在运行的Nginx要进行升级.添加或删除模块时,我们需 要停掉服务器并做相应修改,这样服务 ...

  4. Android中UI设计的一些技巧!!!

    出处:http://blog.csdn.net/android_tutor/article/details/5995759 大家好,今天给大家分享的是Android中UI设计的一些技巧,本节内容主要有 ...

  5. springboot2.X集成HttpClient 发送HTTPS 请求

    1)jar <!--httpclient 发送外部https/http 请求--> <dependency> <groupId>org.apache.httpcom ...

  6. 《软件开发与创新:ThoughtWorks文集:续集》

    <软件开发与创新:ThoughtWorks文集:续集> 基本信息 原书名:The thoughtWorks anthology, volume 2:More essays on softw ...

  7. NFS CIFS SAMBA 的联系和区别

    Common Internet File System, CIFS Server Message Block, SMB Network File System, NFS 在早期网络世界当中,档案数据在 ...

  8. Hibernate @Entity注解配置说明

    持久化是位于JDBC之上的一个更高层抽象. 持久层将对象映射到数据库.以便在查询.装载.更新或删除对象的时候,无须使用像JDBC那样繁琐的API.EJB的早期版本号中.持久化是EJB平台的一部分.EJ ...

  9. scala编程第17章学习笔记(3)

    可变(mutable)集合与不可变(immutable)集合 为了更易于完成不可变集合到可变集合的转换,或者反向转换,Scala提供了一些语法糖.纵使不可变集和映射并不支持真正的+=方法,Scala还 ...

  10. OpenCV 脸部跟踪(2)

          前面一篇文章中提到,我们在一副脸部图像上选取76个特征点,以及这些特征点的连通性信息来描述脸部形状特征,本文中我们会把这些特征点映射到一个标准形状模型.       通常,脸部形状特征点能 ...