使用 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. Redis哨兵模式主从同步不可以绑定127.0.0.1或者0.0.0.0,不然无法进行主从同步

    Redis哨兵模式主从同步不可以绑定127.0.0.1或者0.0.0.0,不然无法进行主从同步,一定要绑定内网IP,而对于跨机房的问题,可以使用iptables进行nat转发来解决.

  2. 分频器VHDL描述

    在数字电路中,常需要对较高频率的时钟进行分频操作,得到较低频率的时钟信号.我们知道,在硬件电路设计中时钟信号时非常重要的.    下面我们介绍分频器的VHDL描述,在源代码中完成对时钟信号CLK的2分 ...

  3. MP1593 RT8272 ACT4070 制作的DC-DC稳压电源

    http://www.ideyi.org/article/11-05/2575971305526398.html?sort=2068_2073_2092_0 MP1593制作的DC-DC稳压电源,这款 ...

  4. HDU1518 Square 【剪枝】

    Square Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  5. [MySql]windows下设置mysql默认编码

    摘要 在安装好mysql的时候,如果新建数据库或者表默认的编码为latin1,如果这时候插入中文时,出出现类似下面的乱码的问题. SQLException: Incorrect string valu ...

  6. Maven私仓配置

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  7. FMXUI

    FMXUI GITHUB: https://github.com/yangyxd/FMXUI FMXUI (YangYxd) [简介] FMXUI的开发忠旨是发掘FMX界面设计的优点,再整合进入And ...

  8. Android支付接入(7):Google In-app-Billing

    今天跟大家一起看下Google的in-app Billing V3支付.    如果没有GooglePlay此处附上安装Google Play的一键安装器的链接(需要Root权限):http://ww ...

  9. 【xshell】xshell设置快捷键 设置Ctrl+C Ctrl+V快捷键为复制粘贴

    在使用xshell的时候,总是不能顺手的进行复制粘贴的操作. 那能不能设置xhsell的快捷键呢? 点击工具--->选项---> 选择 键盘和鼠标 选项卡--->点击编辑----&g ...

  10. xtraTabbedMdiManager 双击最大化和关闭后返回主界面 z

    双击tab头部时候子窗体Float时界面最大化和关闭Float状态的子窗体并不是真正关闭而是回到主界面的问题, 代码如下,其中xtraTabbedMdiManager1_Floating这个是xtra ...