使用 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. 再论C++之垃圾回收(GC)

    本文已经迁移到:http://cpp.winxgui.com/cn:garbage-collection-in-cplusplus 使用智能指针(smart pointers) http://www. ...

  2. [Asp.Net web api]基于自定义Filter的安全认证

    摘要 对第三方开放的接口,处于安全的考虑需要对其进行安全认证,是否是合法的请求.目前在项目中也遇到这种情况,提供的接口因为涉及到客户铭感数据,所以在调用的时候,不能直接暴露,需要有一个认证的机制.所以 ...

  3. Vue 组件 data为什么是函数?

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  4. C#监控文件夹变化

    当需要监控某一文件,FileSystemWatcher类提供了Created, Deleted,Rename等事件. 就拿FileSystemWatcher的Created事件来说,该事件类型是Fil ...

  5. linux centos 系统php支持jpeg的安装方法

    linux php支持jpeg首先要安裝libjpeg,运行下面的命令: yum install libjpeg* libpng* freetype* gd* 耐心等待完成,重启(service ht ...

  6. RobotFramework自动化3-搜索案例

    前言 RF系列主要以案例为主,关键字不会的可以多按按F5,里面都有很详细的介绍,要是纯翻译的话,就没太大意义了,因为小编本来英语就很差哦! 前面selenium第八篇介绍过定位一组搜索结果,是拿百度搜 ...

  7. java中迭代器应用

    本文将利用分析代码的方式,来学习一个集合类的内部结构,以及遍历集合的迭代模式的源码实现细节. 下面我们先简单讨论一个根接口Collection,然后分析一个抽象类AbstractList和它的对应It ...

  8. LeetCode: Implement strStr() [027]

    [题目] Implement strStr(). Returns a pointer to the first occurrence of needle in haystack, or null if ...

  9. 关于查询排序DTO的封装

    DTO: public class SortDto { //排序方式 private String orderType; //排序字段 private String orderField; publi ...

  10. Gedit

    Use Gedit as Remote File Editor via FTP and SSH Migrating from Windows Vista to Ubuntu 8.04 and have ...