组件通信 $ref
（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的更多相关文章
- React子组件和父组件通信
React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...
- vue组件之间的通信， 父子组件通信，兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- React Native中ref的用法（通过组件的ref属性，来获取真实的组件）
ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...
- React 函数式组件的 Ref 和子组件访问（useImperativeHandle）
引入:如何调用函数式组件内部的方法 对于 React 中需要强制修改子组件的情况,React 提供了 Refs 这种解决办法,使得我们可以操作底层 DOM 元素或者自定的 class 组件实例.除此之 ...
- 一文搞定Vue2组件通信
vue 组件通信方式 父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改变自身 ...
- 关于React的父子组件通信等等
//==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...
- vue.js入门（3）——组件通信
5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...
- vue父子组件通信
一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...
- vue组件详解（三）——组件通信
组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...
随机推荐
- React Native商城项目实战06 - 设置安卓中的启动页
1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...
- leetcode-mid-design-297. Serialize and Deserialize Binary Tree¶-NO -？？
mycode 将list转换成树的时候没有思路 参考: deque 是双边队列(double-ended queue),具有队列和栈的性质,在 list 的基础上增加了移动.旋转和增删等 class ...
- 2、node-webkit运行web应用，node-webkit把web应用打包成桌面应用
下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境) 首先新建一个index.html文件,作为我们这个demo的入口页面,我们暂且就把这个页面 ...
- Kolla 让 OpenStack 部署更贴心
目录 目录 Kolla 简介 Kolla & Kolla-ansible 部署 OpenStack 准备操作系统基础环境 准备 Python 基础环境 准备 Docker 基础环境 安装 ko ...
- 项目测试完成后，总结典型性bug，以测试的角度，应该怎么筛选bug
一个wap端改版项目完结了,总结下测试过程中的典型性bug:应该从哪个角度去总结? 有点疑问?不知道是以bug的影响度去总结,还是以优先级去总结(好像优先级和影响度是成正比的,优先级比较高的bug,影 ...
- 【Python】利用豆瓣短评数据生成词云
在之前的文章中,我们获得了豆瓣爬取的短评内容,汇总到了一个文件中,但是,没有被利用起来的数据是没有意义的. 前文提到,有一篇微信推文的关于词云制作的一个实践记录,准备照此试验一下. 思路分析 读文件 ...
- 11.metasploit辅助模块----基本Exp----ARP欺骗中间人MITM----WordPress破解
metasploit辅助模块 信息收集 auxiliary scanners 使用metasploitable靶机 桥接 同一局域网 msfconsole nmap -sT 靶机IP nmap -sS ...
- [转帖]100G QSFP28与CFP,CFP2,CFP4光模块的比较
100G QSFP28与CFP,CFP2,CFP4光模块的比较 https://www.eefocus.com/etulink/blog/17-09/423967_5c520.html 数据中心网络发 ...
- 部署CM集群首次运行报错：Formatting the name directories of the current NameNode.
1. 报错提示 Formatting the name directories of the current NameNode. If the name directories are not emp ...
- r子集代码实现(递归)
#!/usr/bin/env python #coding:utf-8 SET_START = 1 SET_END = 9 SUB_LEN = 10 def r_subset(i, r, pre, a ...