집 > 기사 > 웹 프론트엔드 > vue v-model의 동적 생성 소개

vue v-model의 동적 생성 소개

不言원래의: 2018-06-30 16:21:191547검색

이 기사는 vue v-model의 동적 생성에 대한 관련 지식 포인트와 예제 코드를 공유합니다. 관심 있는 친구들은 참고할 수 있습니다.

1. 입력 상자 v-model에 바인딩된 필드 이름은 백그라운드에서 반환된 데이터를 기반으로 동적으로 생성되어야 합니다. 메서드 값 동적 바인딩 및 하위 구성 요소 바인딩을 사용하여 값과 이벤트를 상위 구성 요소에 전달합니다. 코드는 다음과 같습니다.

//子组件
<template>
 <input v-if="type === 0" type="text" :value="currentValue" @change="handleInput">
 <textarea v-else :value="currentValue" @change="handleInput"></textarea>
</template>

<script>
export default {
// 接收父组件传递过来的状态（值）
 props: {
  type: Number,  //0 input框 1 文本域
  value: String  // 值有时候编辑状态也是先要获取值的 类似 v-model
 },
 data() {
  return {
   currentValue: this.value
  }
 },
 methods: {
  handleInput(e) {
   let value = e.target.value
   if (value === this.currentValue) {
    return
   } else {
    this.currentValue = value
   }
   this.$emit(&#39;input&#39;, value)
  }
 }
}
</script>

//父组件
//extendTypes 动态获取过来的扩展字段 需要绑定的model 为item.extendKey

<p class="form-group" v-for="item in extendTypes">
  <p>
   <ad-input :value="extendTypesModel[item.extendKey]" :type="item.type" @input="handleUpdate(item.extendKey, $event)">
   </ad-input>
  </p>
</p>

// model是动态的，不可以写死，只能在本地先定义一个json extendTypesModel，在获取过来后台的数据之后，本地赋值为空
this.extendTypesModel = {}
if (res && res.code === 0) {
  for (let i = 0; i < res.data.length; i++) {
  this.extendTypesModel[res.data[i].extendKey] = &#39;&#39;
}
  this.extendTypes = res.data
}

//父组件注册的事件
handleUpdate(key, value) {
 this.extendTypesModel[key] = value
}

상위 구성요소와 하위 구성요소는 사용자 정의 속성과 사용자 정의 이벤트를 통해 통신합니다.

상위 구성 요소의 사용자 정의 속성 v-bind는 상위 구성 요소의 값을 하위 구성 요소에 전달합니다.

하위 구성 요소는 props를 통해 상위 구성 요소의 값을 수락합니다. 마지막으로 데이터처럼 직접 사용할 수 있습니다.

자식 구성 요소는 $.emit(상위 구성 요소 메서드 이름, 값) 메서드를 통해 상위 구성 요소에 값을 전달하고 상위 구성 요소의 이벤트를 트리거합니다.

이 방법은 하위 구성 요소에 데이터에 대한 캐시가 있을 때마다 새 입력 상자를 생성하지 않고 이전에 생성되었는지 확인하기 때문에 함정인 것 같습니다. 생성되지 않으므로 데이터에 캐시가 있습니다. 지울 수 없는 경우 더 간단한 방법입니다.

<p class="form-group" v-for="(item, index) in extendTypes">
  <label class="control-label">{{item.extendName}}</label>

  // 既不需要用v-model绑定 也不需要用到子组件 将赋值和取值分开来 而不是用 v-model去绑定，这里取值用到 ref

    <input class="form-control" :value="extendTypesModel[item.extendKey]" @input="handleUpdate(item.extendKey, index)" ref="ipt">
   </p>
   <p class="text-danger" v-if="item.isRequired === 1">*</p>
</p>

handleUpdate(key, index) {
  this.extendTypesModel[key] = this.$refs.ipt[index].value
}

ref는 값을 바인딩하여 참조 정보를 등록합니다. 요소 또는 하위 구성 요소의 경우 this.ref에 바인딩하여 값을 가져옵니다. 값 ref는 요소 또는 하위 구성 요소에 대한 참조 정보를 등록하고 this.refs에 바인딩됩니다. 순회를 위한 v인 경우 바인딩은 배열입니다.

일반적으로 $ref.name.value를 통해 값을 구합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다. 공부, 더 많은 관련 내용은 PHP 중국어 웹사이트에 주목해주세요!

vue v-model의 동적 생성 소개

관련 기사