하위 구성 요소 내에서 props.value 수정

하위 구성 요소 내에서 props.value 수정

나는 Vue를 처음 접하고 "dropdown" 구성요소를 만들려고 한다.다음과 같은 상위 구성 요소에서 사용:

<my-dropdown v-model="selection"></my-dropdown>

어디에selection로 저장된다.data사용자의 선택을 반영하도록 업데이트해야 한다.이렇게 하려면 내 드롭다운 구성 요소에value소포와 소포가 필요하다.input선택 사항이 변경될 때 이벤트

하지만, 나는 또한 수정하기를 원한다.value아이 자체 내에서, 스스로 드롭 다운 컴포넌트를 사용할 수 있기를 원하기 때문에(그렇지 않으면 UI는 스스로 사용할 경우 새로 선택한 값을 반영하도록 업데이트되지 않기 때문에 수정할 필요가 있다.)

내가 묶을 수 있는 방법이 있을까?v-model위와 같이, 그러나 또한 아이 내부에서 값을 수정한다(그 이유는 내가 할 수 없는 것 같다).value소품이며, 아이는 자신의 소품을 개조할 수 없다.)

입력/값 값을 처리하는 로컬 값에 대한 계산된 속성 프록시가 있어야 한다.

props: {
  value: {
    required: true,
  }
},
computed: {
  mySelection: {
    get() {
      return this.value;
    },
    set(v) {
      this.$emit('input', v)
    }
  }
}

이제 템플릿을 사용하여mySelection이 구성 요소 내에서 데이터를 관리하기 위한 값과 데이터가 변경될 때 데이터가 올바르게 배출되고 v-model과 항상 동기화됨(selected( ) 부모에서 사용할 때.

Vue의 철학은 "제안들 내려놓고, 사건들 위로"이다.문서에는 다음과 같은 내용까지 나와 있다.Composing Components(구성 요소).

구성 요소는 부모-자녀 관계에서 가장 일반적으로 함께 사용되어야 한다. 구성 요소 A는 자체 템플릿에서 구성 요소 B를 사용할 수 있다.그들은 불가피하게 서로 의사소통을 할 필요가 있다: 부모는 아이에게 자료를 넘겨줄 필요가 있을 수 있고, 아이는 부모에게 아이에게 일어난 일을 알릴 필요가 있을 수 있다.그러나, 명확하게 정의된 인터페이스를 통해 부모와 아이가 가능한 한 분리되도록 하는 것도 매우 중요하다.이렇게 하면 각 구성 요소의 코드가 상대적으로 격리된 상태에서 작성 및 추론될 수 있으므로 유지보수가 용이하고 잠재적으로 재사용이 용이해질 수 있다.

Vue에서 부모-자녀 구성 요소 관계는 소품 다운, 이벤트 업으로 요약될 수 있다.부모는 소품을 통해 아이에게 데이터를 전달하고, 아이는 이벤트를 통해 부모에게 메시지를 보낸다.다음엔 어떻게 작동하는지 봅시다.

하위 구성 요소 내에서 값을 수정하려고 하지 마십시오.부모에게 어떤 것에 대해 말해주고, 만약 부모들이 신경 쓴다면, 그것은 그것에 대해 뭔가를 할 수 있다.아동 구성요소를 바꾸게 하는 것은 아동에게 너무 많은 책임을 준다.

사용자 정의 양식 입력 구성 요소를 사용할 수 있음

사용자 지정 이벤트를 사용한 양식 입력 구성 요소

기본적으로 사용자 지정 구성 요소는value버팀목과 발포input값이 변경될 때 이벤트

다음과 같은 패턴을 사용할 수 있다.

1. 1개의 입력 프로펠러 수용
2. 데이터 내부에 다른 변수 있음
3. 생성 시 들어오는 프로펠러를 데이터 변수에 화이트닝하십시오.
4. 감시기를 사용하여 들어오는 소포에서 변경 사항을 관찰하십시오.
5. 구성 요소 내부의 변경 시 변경 사항을 전송하십시오.

데모:

'use strict';
Vue.component('prop-test', {
  template: "#prop-test-template",
  props: {
    value: { // value is the default prop used by v-model
      required: true,
      type: String,
    },
  },
  data() {
    return {
      dataObject: undefined,
      // For testing purposes:
      receiveData: true,
      sendData: true,
    };
  },
  created() {
    this.dataObject = this.value;
  },
  watch: {
    value() {
      // `If` is only here for testing purposes
      if(this.receiveData)
      this.dataObject = this.value;
    },
    dataObject() {
      // `If` is only here for testing purposes
      if(this.sendData)
      this.$emit('input', this.dataObject);
    },
  },
});

var app = new Vue({
  el: '#app',
  data: {
    test: 'c',
  },
});

<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<script type="text/x-template" id="prop-test-template">
  <fieldset>
    <select v-model="dataObject">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
      <option value="d">d</option>
      <option value="e">e</option>
      <option value="f">f</option>
      <option value="g">g</option>
      <option value="h">h</option>
      <option value="i">i</option>
      <option value="j">j</option>
    </select>
    <!-- For testing purposed only: -->
    <br>
    <label>
      <input type="checkbox" v-model="receiveData">
      Receive updates
    </label>
    <br>
    <label>
      <input type="checkbox" v-model="sendData">
      Send updates
    </label>
    <!--/ For testing purposed only: -->
  </fieldset>
</script>
<div id="app">
  <prop-test v-model="test"></prop-test>
  <prop-test v-model="test"></prop-test>
  <prop-test v-model="test"></prop-test>
</div>

이 데모에는 선택 상자당 이벤트 전파를 해제할 수 있는 기능이 있으므로 값이 로컬로 적절하게 업데이트되었는지 테스트할 수 있으며, 물론 프로덕션에는 필요하지 않다.

구성 요소 내부의 프로펠러를 수정하려면 "기본값" 프로펠러를 구성 요소에 전달하십시오.내가 그렇게 하는 방법은 다음과 같다.

<MyDropdownComponent
  :default="defaultValue"
  :options="options"
  v-model="defaultValue"
/>

그럼 내가 어떻게 갈지 두 가지 방법이 있어

옵션 1 - 사용자 정의 드롭다운 요소

사용자 지정 HTML을 사용 중이므로 선택한 속성을 설정할 수 없음그러니 네 방법에 대해 창의적일 필요가 있을 거야.구성 요소 내에서 기본값을 설정할 수 있음prop구성 요소 생성에 대한 데이터 속성.다른 방법으로 이 작업을 수행하고watcher을 아래의 예에 나는 그것을 아래 예에 추가했다.

export default {
  ...
  data() {
    return {
      selected: '',
    };
  },
  created() {
    this.selected = this.default;
  },
  methods: {
    // This would be fired on change of your dropdown.
    // You'll have to pass the `option` as a param here,
    // So that you can send  that data back somehow
    myChangeMethod(option) {
      this.$emit('input', option);
    },
  },
  watch: {
    default() {
      this.selected = this.default;
    },
  },
};

그$emit데이터를 상위 구성요소에 다시 전달하고, 수정하지 않을 것이다.표준을 사용한다면 이렇게 할 필요가 없을 것이다.select원소의

2 - 옵션 2 - 표준select

<template>
  <select
    v-if="options.length > 1"
    v-model="value"
    @change="myChangeMethod"
  >
    <option
      v-for="(option, index) of options"
      :key="option.name"
      :value="option"
      :selected="option === default"
    >{{ option.name }}</option>
  </select> 
</template>

<script>
export default {
  ...
  data() {
    return {
      value: '',
    };
  },
  methods: {
    // This would be fired on change of your dropdown
    myChangeMethod() {
      this.$emit('input', this.value);
    },
  },
};
</script>

이 방법은 확실히 가장 쉬우며, 기본값을 사용해야 함을 의미한다.select원소의

참조URL: https://stackoverflow.com/questions/48575226/modify-props-value-from-within-child-component