一. 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的更多相关文章

  1. vue.js中ref及$refs的使用及讲解

    关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注 ...

  2. Vue.js-11:第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  3. vue之ref

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. 1.ref ...

  4. Vue使用Ref跨层级获取组件实例

    目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...

  5. vue里ref ($refs)用法

    ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...

  6. vue中的 ref 和 $refs

    如图,ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例: ...

  7. vue中ref的使用(this.$refs获取为undefined)

    如果你获取到的总是空的,你注意一下: 1.你在哪里调用,和你调用的对象 试试在mounted()里面调用有效果没有 调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted() ...

  8. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

  9. 理解Vue中的ref和$refs

    参考博客:https://www.cnblogs.com/xumqfaith/p/7743387.html

随机推荐

  1. uilabel 和uitextview 自适应大小

    本文转载至 http://blog.csdn.net/liulichao20/article/details/8957752 分类: ios2013-05-21 22:06 321人阅读 评论(0)  ...

  2. awk sed grep 详解

    Linux的文本处理工具浅谈 awk [功能说明] 用于文本处理的语言(取行,过滤),支持正则 NR代表行数,$n取某一列,$NF最后一列 NR==20,NR==30 从20行到30行 FS竖着切,列 ...

  3. 【已解决】Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory

    [已解决]Android ADT中增大AVD内存后无法启动:emulator failed to allocate memory 结论是: 当前有个bug: 默认是通过 hw.ramSize=1024 ...

  4. PHP HTTP协议(报头/状态码/缓存)

    一.HTTP协议介绍 1. #HTTP协议       # (1 建立在TCP/IP协议基础上       # (2 web开发数据传输依赖于http协议       # (3 http 协议全称是文 ...

  5. dao---service---action分层结构

    此文转载于http://blog.csdn.net/jay198746/article/details/4698709 之前有看过一些ssh2中采用dao---service---action分层结构 ...

  6. Struts2的表单标签还可以为集合中的对象赋值

    •Struts 还允许填充 Collection 里的对象, 这常见于需要快速录入批量数据的场合   代码如下 : TestCollectionAction.java package com.atgu ...

  7. JavaScript学习(5)-Image对象和动态HTML

    JavaScript学习5 1.image 对象 对象引用 document.images[n] document.images["imageName"] document.ima ...

  8. 给NavigationBar设置颜色

    传统的设置 ) { [[UINavigationBar appearance] setBarTintColor:[UIColor redColor]]; } else { [[UINavigation ...

  9. add() 方法用于向 <select> 添加一个 <option> 元素。

    //add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...

  10. 如何实现手游app瘦身?

    手游服务商来说,手游包体大一直是个很困扰的问题.一款手游产品而言,包体大小和更新方式对于有效用户的转化率往往起到非常关键的作用,话说手游安装包越小,用户转化率越高,那该如何实现app瘦身呢? 工具/原 ...