집 > 기사 > 웹 프론트엔드 > Vue 양식 클래스의 상위 구성요소와 하위 구성요소 간의 데이터 전송 예

Vue 양식 클래스의 상위 구성요소와 하위 구성요소 간의 데이터 전송 예

不言원래의: 2018-05-05 16:37:251653검색

이 글은 주로 Vue 폼 클래스의 상위-하위 컴포넌트 데이터 전송 예시를 소개합니다. 이는 특정 참조 값을 가지고 있습니다. 이제 필요한 친구들이 참고할 수 있습니다.

프로젝트에 Vue.js를 사용한다면 개발하면 반드시 사용하게 될 것입니다. 컴포넌트 기반 개발 방법은 개발 및 유지 관리에 어느 정도 편리함을 제공하지만, 컴포넌트 간의 데이터 및 상태 전송 상호 작용이 포함된 경우 특히 많은 수의 페이지에 직면할 때 문제가 됩니다. 형태의.

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

문서에서 제시한 해결 방법과 동일하게 부모 컴포넌트는 주로 props를 통해 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트는 주로 $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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;
        }
      }
    }
  }
</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: &#39;&#39;
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit(&#39;input&#39;, e.target.value)
      }
    }
  }
</script>

이 메소드가 실행될 때마다 사용자 정의 이벤트 입력이 트리거되고 입력이 실행됩니다. 상자에 값이 전달됩니다.

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

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

2. 참조 유형 데이터 전달

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

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

<!-- 父组件 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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;,
          age: &#39;21&#39;
        }
      }
    }
  }
</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: &#39;&#39;,
          age: &#39;&#39;,
          address: &#39;&#39;
        }
      }
    },
    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(&#39;update:formData&#39;, 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를 사용하는 단계이고 그 기본 사항에 대해 충분히 알지 못하지만 소스 코드를 꼭 읽어보고 싶습니다. 생각해 보세요... .뭔가 잘못된 것 같으면 그냥 말하고 소통하자.

Vue 양식 클래스의 상위 구성요소와 하위 구성요소 간의 데이터 전송 예

관련 기사