zoukankan      html  css  js  c++  java
  • 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


  • 相关阅读:
    利用SqlBulkCopy快速大批量导入数据
    未能完成操作,无效的FormATETC结构
    JS编码和Asp.net编码
    Sql分页两种常用算法
    Subsonic.exe 生成数据访问层代码,报“从索引 0 处开始,初始化字符串的格式不符合规范”错误解决办法
    Asp.Net,代码实现页面输出缓存
    JS中all Collection 的几个方法
    注册、反注册dll,regsvr32命令详解
    ASP.NET页面传值汇总(Session/Server.Transfer/Query String/Cookie/Application)
    表格导出EXCEL
  • 原文地址:https://www.cnblogs.com/wulinzi/p/8145425.html
Copyright © 2011-2022 走看看