1.  ref 获取dom元素,除了能获取dom元素也能获取组件dom,

  组件通信:
       在父组件中直接调用ref定义的组件的数据或者方法

<div id="app">
<p ref="mybutton"></p>
<div ref="mybutton"></div> <!-- 会覆盖 -->
<!--遇见循环 输出是一个数组-->
<template v-for="i in 3">
<div ref="mybutton">ww</div>
</template>
<my-button ref="myComponent"></my-button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
mounted(){
console.log(this.$refs.mybutton);
console.log(this.$refs.myComponent);
console.log(this.$refs.myComponent.msg); //获取组件的数据
this.$refs.myComponent.fn(); //获取组件的元素和方法
},
components:{
"my-button":{
template:"<div>myYilia</div>",
data(){
return {
msg:"1212"
}
},
methods:{
fn(){
console.log("121");
}
}
}
} });
</script>

vue基础 ref的作用的更多相关文章

  1. vue基础----key的作用

    1.key 在虚拟dom中 标记不同的结构,for循环中需要添加上 <body> <div id="app"> <div v-if="fla ...

  2. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  6. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  7. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  8. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  9. Vue基础以及指令, Vue组件

    Vue基础篇一 Vue指令 Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上. <div ...

随机推荐

  1. [LC] 231. Power of Two

    Given an integer, write a function to determine if it is a power of two. Example 1: Input: 1 Output: ...

  2. 剖析String,StringBuffer,StringBuilder异同

    近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下,便 ...

  3. Android开发之《实现类似Toast可以自动消失的提示栏Tip》

    import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.cont ...

  4. 吴裕雄--天生自然python学习笔记:Python3 File(文件) 方法

    open() 方法 Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出 OSError. 注意:使用 open() ...

  5. Nginx笔记总结十二:nginx版本号隐藏

    vim nginx.conf http { server_tokens off;} php-fpm fastcgi.conf或fcgi.conf fastcgi_param SERVER_SOFTWA ...

  6. ffmpeg android移植

    CMake语法简介(androidstudio中利用CMake开发NDK): http://blog.csdn.net/u013718120/article/details/62883711FFmpe ...

  7. C++输入带空格的字符串

    对于字符数组 1.使用 getline() 读入整行数据,回车键输入的换行符确定输入结尾. 调用方法:cin.getline(str, len) 第一个参数str用来存储输入行的数组名称,第二个参数是 ...

  8. iOS自建分发

    1.首先满足具有https证书的域名和空间.2.通常使用github或者国内第三方托管平台.3.上传ipa文件到空间内,获取ipa文件的下载地址.4.然后编辑plist文件(注意:ipa文件和plis ...

  9. flask 中文乱码

    返回的json数据中包含中文,但前端显示乱码,添加了 app.config['JSON_AS_ASCII'] = False仍然没有解决, app.config['JSONIFY_MIMETYPE'] ...

  10. NumPy的随机函数子库——numpy.random

    NumPy的随机函数子库numpy.random 导入模块:import numpy as np 1.numpy.random.rand(d0,d1,...,dn) 生成一个shape为(d0,d1, ...