使用 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. 【转】JABC访问oracle数据库报ORA-12505

    Oracle 问题描述: 今天使用jdbc连接oracle 10.2.0.1.0 数据库的时候出现了下列错误: Connection refused(DESCRIPTION=(TMP=)(VSNNUM ...

  2. ThinkPHP通过类的链式继承优化空操作的实现

    上篇<ThinkPHP空操作和空控制器的处理>中,在处理空操作时修改了父类Controller.class.php中代码,不到万不得已不能 修改基类控制器中的原码,此时可在子类与父类之间, ...

  3. HTML5学习笔记3

    7.文档元素 文档元素的主要作用是划分各个不同的内容,让整个页面布局清晰明快,让整个布局具有语义,进一步替代div.基本上没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念. h1~h6 ...

  4. FolderSync :The various features and how to use them

    Help - Tacit Dynamics Help This page describes the various features of FolderSync and how to use the ...

  5. C#编程(五)----流程控制

    流控制(控制语句) 程序的代码不是按照从上往下执行的,是按照控制语句执行的. 条件语句 C#中有两个控制语句:if语句还有switch语句 1.if语句   C#中继承了C和C++中的if语句,语法直 ...

  6. ztree使用系列三(ztree与springmvc+spring+mybatis整合实现增删改查)

    在springmvc+spring+mybatis里整合ztree实现增删改查,上一篇已经写了demo,以下就仅仅贴出各层实现功能的代码: Jsp页面实现功能的js代码例如以下: <script ...

  7. Selenium2+python自动化61-Chrome您使用的是不受支持的命令行标记:--ignore-certificate-errors

    前言 您使用的是不受支持的命令行标记:--ignore-certificate-errors.稳定性和安全性会有所下降 selenium2启动Chrome浏览器是需要安装驱动包的,但是不同的Chrom ...

  8. T4 生成实体和简单的CRUD操作

    <#@ template debug="false" hostspecific="false" language="C#" #> ...

  9. docker Redis的主从配置

    redis是k-v型nosql数据库,支持字符串(string).列表(list).集合(set).散列(hash).有序集合(zset:形如member:score的散列集合,其中member为成员 ...

  10. 解决sqoop导入报错:Caused by: java.sql.SQLException: Protocol violation

    报错信息: -- ::, INFO [main] org.apache.hadoop.mapred.MapTask: Ignoring exception during close for org.a ...