집 > 기사 > 웹 프론트엔드 > Vue 양식 클래스 상위-하위 구성 요소 데이터 전송을 작동하는 방법

Vue 양식 클래스 상위-하위 구성 요소 데이터 전송을 작동하는 방법

php中世界最好的语言원래의: 2018-06-01 11:38:381477검색

이번에는 Vue 폼 클래스 상위-하위 컴포넌트 데이터 전송 작업 방법과 Vue 폼 클래스 상위-하위 컴포넌트 데이터 전송 작업 시 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 봐.

프로젝트 개발에 Vue.js를 사용한다면 필연적으로 컴포넌트 기반 개발 방법을 사용하게 됩니다. 이 방법은 개발 및 유지 관리에 어느 정도 편의성을 제공하지만 컴포넌트 간의 데이터 및 상태 전송 상호 작용이 포함되는 경우에는 번거로운 일입니다. , 특히 양식이 많은 페이지를 접할 때 그렇습니다.

여기서는 평소 처리하는 방법을 기록하겠습니다. 이 글에서는 주로 부모와 자식 컴포넌트 간의 데이터 전송을 기록합니다. 비부모 컴포넌트와 자식 컴포넌트는 주로 Vuex를 통해 처리됩니다.

문서에서 제시한 해결 방법과 동일하게 부모 컴포넌트는 주로 props를 통해 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트는 주로 trigger $emit()를 통해 부모 컴포넌트로 데이터를 전달하지만, 약간의 차이점이 있습니다. 용법.

1. 기본 유형 데이터 전달

하위 구성 요소의 내용이 적을 경우 기본 유형 데이터(일반적으로 문자열, 숫자 및 부울)가 직접 전달됩니다.

먼저 예제를 살펴보겠습니다.

<!-- 父组件 parent.vue -->
<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: '请输入姓名'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p class="child">
    <label>
      姓名：<input type="text" :value="currentValue" @input="changeName">
    </label>
  </p>
</template>
<script>
  export default {
    props: {
      // 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

메소드changeName을 하위 구성 요소의 입력 이벤트에 바인딩합니다. 이 메소드가 실행될 때마다 맞춤 이벤트 입력이 트리거되고 입력 상자의 값이 전달됩니다.

상위 구성 요소는 v-model 지시어를 통해 값을 바인딩하여 하위 구성 요소가 전달한 데이터를 받습니다. 그러나 이는 상위 구성 요소가 하위 구성 요소의 데이터에 응답한다는 의미일 뿐입니다. 하위 구성 요소가 상위 구성 요소가 전달한 데이터에 응답하도록 하려면 하위 구성 요소에 대한 props 속성 값을 정의해야 하며 이 속성은 다음과 같습니다. 가치가 있어야 하며 다른 말로 쓸 수 없습니다.

v-model은 실제로 구문 설탕입니다. 자세한 내용은 맞춤 이벤트를 사용하는 양식 입력 구성 요소를 참조하세요.

2. 참조 유형 데이터 전달

예를 들어 하위 구성 요소에 콘텐츠가 많은 경우 하위 구성 요소에는 여전히 각 양식 요소에 값이 바인딩되어 있습니다. 위와 같이 중복된 코드를 많이 작성해야 합니다. 따라서 이때 일반적으로 전달되는 것은 객체입니다. 값 전달의 기본 원리는 동일하지만 작성 방법이 약간 다릅니다.

먼저 코드를 살펴보겠습니다.

<!-- 父组件 parent.vue -->
<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child :formData.sync="form"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名',
          age: '21'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p class="child">
    <label>
      姓名：<input type="text" v-model="form.name">
    </label>
    <label>
      年龄：<input type="text" v-model="form.age">
    </label>
    <label>
      地点：<input type="text" v-model="form.address">
    </label>
  </p>
</template>
<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
    props: {
      // 这个 prop 属性接收父组件传递进来的值
      formData: Object
    },
    watch: {
      // 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定
      // 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是单向数据流，通过触发 update 事件绑定 formData，
      // 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
      // 父组件在绑定 formData 的时候，需要加上 .sync
      this.$emit('update:formData', this.form)
    }
  }
</script>

props는 단방향 데이터 흐름입니다. props의 속성을 양방향으로 바인딩해야 하는 경우 .sync 수정자를 사용해야 합니다. 자세한 내용은 .sync를 참조하세요. 수정자. 이것은 사실이 아닙니다.

여기서 주목해야 할 점은 props는 vue에서 직접 수정할 수 없다는 점입니다. 따라서 상위 구성 요소에 값을 전달하려면 여전히 데이터의 값을 수정해야 합니다. Prop은 호출의 중개인으로만 존재합니다. 부모와 자식 사이.

또한 상위 구성 요소가 처음에 전달한 데이터를 미리 보려면 watch를 통해 prop 변경을 모니터링하고 하위 구성 요소가 초기화될 때 값을 전달해야 합니다.

참고: this.$emit('update:formData', this.form)을 하위 구성 요소에 마운트했습니다. 그 이유는 각 입력 태그 이벤트의 입력 이벤트에서 사용자 정의가 트리거되는 것을 방지하기 위한 것입니다. 이런 방식으로 작성하면 상위 구성 요소와 하위 구성 요소가 모두 객체를 공유하게 됩니다.

위 코드에서는 formData.sync="form"을 사용하여 상위 구성 요소의 값을 바인딩하고 양식은 객체이며 하위 구성 요소의 사용자 정의 이벤트가 트리거되는 경우입니다. this.$emit(' update:formData' , this.form), this.form도 객체여야 합니다.

여러 하위 구성 요소가 하나의 개체를 사용하는 경우 이 작성 방법은 피해야 합니다. 한 구성 요소가 이 개체의 데이터를 수정하면 다른 하위 구성 요소도 이에 따라 변경되기 때문입니다.

그래서 사용할 때 다음과 같이 각 하위 구성 요소에 자체 개체를 할당합니다.

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}

이것은 상위 구성 요소에 정의된 데이터입니다. 물론 이름은 이렇게 선택되지 않습니다.

End

아직 Vue를 사용하는 단계이고 그 기본 사항에 대해 충분히 알지 못합니다. 소스 코드를 꼭 읽어보고 싶지만 그냥 그렇습니다. 생각해 보세요... 혹시 잘못된 점이 있다면 편하게 말씀하시고, 서로 소통합시다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!