vue的ref与$refs_综合

一. ref使用在父组件上

父组件html：

　　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>