（1）放在dom上表示获取当前dom元素,

（2）放到组件上表示获取当前组件实例

（3）在v-for中获取的是集合

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>组件通信 ref</title>

    <script src="./node_modules/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <parent ref="parent"></parent>

    </div>

</body>

<script>

    Vue.component('parent',{

     template:`<div><span v-if="isShow">hello world</span></div>`,

     data() {

       return {

          isShow:false

       }

     },

     methods: {

        Show() {

             this.isShow = true;

        }

     },

   })

   let  vm = new Vue({

         el:'#app',

         mounted() {

            //  console.log(this.$refs.parent.Show())

            setTimeout(()=>{

                this.$refs.parent.Show()

            },)

         },

   })

   //hello

</script>

</html>

组件通信 $ref的更多相关文章

  1. React子组件和父组件通信

    React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...

  2. vue组件之间的通信， 父子组件通信，兄弟组件通信

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...

  3. React Native中ref的用法（通过组件的ref属性，来获取真实的组件）

    ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...

  4. React 函数式组件的 Ref 和子组件访问（useImperativeHandle）

    引入:如何调用函数式组件内部的方法 对于 React 中需要强制修改子组件的情况,React 提供了 Refs 这种解决办法,使得我们可以操作底层 DOM 元素或者自定的 class 组件实例.除此之 ...

  5. 一文搞定Vue2组件通信

    vue 组件通信方式 父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改变自身 ...

  6. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  7. vue.js入门（3）——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  8. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

  9. vue组件详解（三）——组件通信

    组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...

随机推荐

  1. JUnit@Before失效

    在学习Shiro的过程中需要使用到JUnit@Before注解配合测试,但是无论如何,@Before下面的方法都不按照预期的执行,困扰良久,后来各种百度终于找到根源,今分享于诸公,望能解诸公之急: J ...

  2. C# 截获某个域中未捕获的异常 CLR20R3 程序终止的几种解决方案

    AppDomain.UnhandledException可以获的异常,却截不下来,求解 AppDomain.CurrentDomain.UnhandledException += CurrentDom ...

  3. CentOS 6.5 编译安装Apache2.4

    一. httpd 2.4的新特 1) MPM支持运行时装载 --enable-mpms-shared=all --with-mpm=prefork|worker|event2) 支持event MPM ...

  4. sql type subtype 统计

    select * from testtable; type subtype value a sa 1b sb 1a sb errorb sa errora sb 1b sb 1c sa errorc ...

  5. Golang基础(3)：数组，切片和字典

    一:数组 数组是一个具有相同类型元素,固定长度的有序集合,一般定义如下:var x [5]int表示数组是一个整数型数组,长度为5数组的几种定义方式 a: var来定义数组,然后依次赋值 packag ...

  6. 【MM系列】SAP MM模块-收货自动创建采购订单

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-收货自动创建采购订 ...

  7. LAMP框架

    一基本常识 LNMP (Linux + Nginx + MySQL + PHP) LAMP (Linux + Apache + MySQL + PHP) //php作为Apache的模块Apache. ...

  8. DG on Windows 10 S: 执行任意代码

    DG on Windows 10 S: 执行任意代码 windows 10 S版本是什么鬼? 众所周知,我们使用的是windows 10企业版 LTSC.更准确一点,CMD运行winver,我的版本是 ...

  9. 【Linux开发】OpenCV在ARM上的移植

    与X86 Linux类似,请参考:Linux 下编译安装OpenCV 本文在此基础上进行进一步操作. 网络上很多移植编译的方法比较老,多数针对OpenCV 1.0,而且方法很麻烦,不仔细操作很容易出错 ...

  10. SSIS包定时执行

    企业管理器 --管理 --SQL Server代理 --右键作业 --新建作业 --"常规"项中输入作业名称 --"步骤"项 --新建 --"步骤名& ...