vue的ref与$refs
一. ref使用在父组件上
父组件html:
<information ref='information'></information>
import information from './information'
components:{information,bill,means},
在父组件上使用子组件的值,js :this.$refs.information.isAdd; isAdd是information组件的data的属性。
二.ref使用在元素上
例如本组件html:
<span ref="myspan" class="redmy">23232</span>
本组件js使用:this.$refs["myspan"].className //
redmy
this.$refs["myspan"] 指代对象//
<span class="redmy">23232</span>
三.ref使用在子组件上
子组件上有
<h5 ref='insideDomRef'>我是子组件</h5>
父组件上可以引用子组件的值:this.$refs.insideDomRef
// <h5 >我是子组件</h5>
实例
这是父组件:
<template><div>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm"
label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[{required: true,message:'请输入邮箱地址', trigger:'blur' },{type:'email',message:'请输入正确的邮箱地址',trigger:'blur,change'}]">
<el-input v-model="dynamicValidateForm.email" ref="myemail"></el-input>
</el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index"
:key="domain.key" :prop="'domains.' + index + '.value'" :rules="{required: true, message: '域名不能为空', trigger: 'blur'}">
<el-input v-model="domain.value"></el-input>
<el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item> <span ref="myspan" class="redmy">23232</span> <el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item> </el-form> <childone ref="childonemyyy"></childone>
</div>
</template>
<script>
import childone from './childone'
export default {
components:{childone},
data() {
return {
dynamicValidateForm: {
domains: [{
value: ''
}],
email: '',
spanval:'',
}
};
},
methods: {
submitForm(formName) { this.$refs["childonemyyy"].isAdd;//"mychildone"用在父组件上引用子组件值,返回子组件上的data数据
this.$refs["myspan"].className //redmy 用在元素上,返回元素节点对象 this.$refs[formName].validate((valid) => { if (valid) {
alert('submit!'+this.$refs[formName].email);
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
value: '',
key: Date.now()
});
}
}
}
</script>
这是子组件:
<template><div>
<p class="ppp">我是p段落,我是子组件一</p>
<el-button @click="submit">子组件</el-button>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return{
isAdd:"mychildone",
}
},
methods:{
submit(){
} }, created(){ } } </script>
jieshu
vue的ref与$refs的更多相关文章
- vue.js中ref及$refs的使用及讲解
关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注 ...
- Vue.js-11:第十一章 - Vue 中 ref 的使用
一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...
- vue之ref
ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. 1.ref ...
- Vue使用Ref跨层级获取组件实例
目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...
- vue里ref ($refs)用法
ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...
- vue中的 ref 和 $refs
如图,ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例: ...
- vue中ref的使用(this.$refs获取为undefined)
如果你获取到的总是空的,你注意一下: 1.你在哪里调用,和你调用的对象 试试在mounted()里面调用有效果没有 调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted() ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- 理解Vue中的ref和$refs
参考博客:https://www.cnblogs.com/xumqfaith/p/7743387.html
随机推荐
- hdu 2857:Mirror and Light(计算几何,点关于直线的对称点,求两线段交点坐标)
Mirror and Light Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- LAMP环境如何配置多个域名访问
背景: 公司有多个项目想要挂载在一个服务器上,因此需要多个域名来访问不同的网站,其实就是一个阿里云服务器,一个ip对应于多个域名 lamp环境: centos版本:命令查看centos的版本号:rpm ...
- 说说M451例程讲解之串口
/**************************************************************************//** * @file main.c * @ve ...
- C语言二维数组
上节讲解的数组可以看作是一行连续的数据,只有一个下标,称为一维数组.在实际问题中有很多数据是二维的或多维的,因此C语言允许构造多维数组.多维数组元素有多个下标,以确定它在数组中的位置.本节只介绍二维数 ...
- springboot tomcat的使用
使用自带的tomcat 以java 项目启动: 默认端口号为8080 1.必须导入此包 2.有启动类
- 2D绘图引擎比较
这个问题很普遍.最近在研究这个问题,在网上搜了一些资料,再结合自己的经验,谈谈自己的一些想法. 一.双缓存能提高绘图效率吗? 网上有篇文章:绘图效率完整解决方案——三种手段提高GDI/GDI+绘图效率 ...
- Android中的TextView实现多行显示省略号以及下划线的实现
android:lines="2" android:ellipsize="end" 显示两行,多余部分…显示 textView.getPaint().setFl ...
- ListView.setDivider,自定义的Devider
ListView lv = getListView(); ColorDrawable sage = new ColorDrawable(this.getResources().getColor(R.c ...
- PHP mysql基本语句指令
/*选择数据库 use test; */ /* 显示所有的数据库 show databases; */ /*删除表/数据库 drop database test1; delete from user1 ...
- ZOJ 3932 Deque and Balls
There are n balls, where the i-th ball is labeled as pi. You are going to put n balls into a deque. ...