使用 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. Polly简介 — 1. 故障处理策略

    Polly 是 .Net 下的一套瞬时故障处理及恢复的函式库,可让开发者以fluent及线程安全的方式来应用诸如Retry.Circuit Breaker.Timeout.Bulkhead Isola ...

  2. oracle case when exists()

    用法如下: select case when exists(select 1 from t_test c where c.name = 'zhangsan'     and c.age = 23 ) ...

  3. AMD64 Instruction-Level Debugging With dbx

    http://www.oracle.com/technetwork/server-storage/solarisstudio/documentation/amd64-dbx-364568.html A ...

  4. [android]ShareSDK——内容分享和短信验证

    前言 新版本号ShareSDK的分享和短信验证,按官网的文档,都须要加入一个<Activity></Activity>标签,而分享和短息验证的这个标签内容都一样.会冲突. 解决 ...

  5. datagrid在MVC中的运用10-勾选

    本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": ...

  6. 使用msm配置分布式tomat,实现session共享

    一,环境说明 操作系统是Windows7家庭版(有点不专业哦,呵呵!),JDK是1.6的版本, Tomcat是apache-tomcat-6.0.35-windows-x86,下载链接:http:// ...

  7. 在VirtualBox中为已有的磁盘增加磁盘大小

    ①打开CMD,进入到具体虚拟机镜像的存放位置. ②输入命令:VBoxManage modifyhd uuid --resize 25000,这里的25000单位是M,表示修改后的硬盘大小.若是VBox ...

  8. Linux命令大观

    一.文件管理 cat chattr chgrp chmod chown cksum cmp diff diffstat file find git gitview indent cut ln less ...

  9. python里的引用、浅拷贝、深拷贝

    参考: 1.http://wsfdl.com/python/2013/08/16/%E7%90%86%E8%A7%A3Python%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9 ...

  10. GPU/CUDA程序初体验 向量加法

    现在主要的并行计算设备有两种发展趋势: (1)多核CPU. 双核,四核,八核,...,72核,...,可以使用OpenMP编译处理方案,就是指导编译器编译为多核并行执行. (2)多线程设备(GP)GP ...