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