vuejs 2 프로포트를 변환하지 않도록 합니다.

vuejs 2 프로포트를 변환하지 않도록 합니다.

코드를 실행하면 콘솔에 다음과 같이 표시됩니다.상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변환되는 프로펠러: "is Checked".다른 게시물들은 봤지만 제 문제에 적응할 수 없습니다.누가 설명 좀 해주시겠어요?

부모: 템플릿:

<div class="checkBox-container">
<input type="checkbox"/>
<!-- <div class="check" :class="[size]" v-if="!isChecked"></div>
<div class="check" :class="[size]" v-else>
  <div>v</div>
</div> -->
<div class="check" :class="[size]" @click="changeVal">
  <div v-if="isChecked">v</div>
</div>
<div><label class="label">{{label}}</label></div>
<div><span class="subLabel">{{subLabel}}</span></div>

스크립트:

export default {
  name: "ax-checkbox",
  props: {
     label: String,
    subLabel: String,
    size: String,
    isChecked: false,
    checks: []
  },
  methods: {
    changeVal() {
      this.isChecked = !this.isChecked;
      this.$emit("changeVal");
    }
  }
};

어린아이

<div class="filters">
    <ax-checkbox label="Où :" subLabel="Ville" size="small"></ax-checkbox>
    <div class="separator"></div>
    <ax-checkbox label="Quoi :" subLabel="Thématique(s)" size="small"></ax-checkbox>
    <div class="separator"></div>
    <ax-checkbox label="Quand :" subLabel="Dans..." size="small"></ax-checkbox>
</div>

변이시키고 있는 소품은isChecked.

따라서 로컬 데이터 변수를 만듭니다(로 초기화됨).isChecked를 대신 변환합니다.

export default {
  name: "ax-checkbox",
  props: {
     label: String,
    subLabel: String,
    size: String,
    isChecked: false,
    checks: []
  },
  data() {
    return {isCheckedInternal: this.isChecked}
  },
  methods: {
    changeVal() {
      this.isCheckedInternal = !this.isCheckedInternal;
      this.$emit("changeVal");
    }
  }
};

템플릿으로 바꿉니다.

<div class="checkBox-container">
<input type="checkbox"/>
<!-- <div class="check" :class="[size]" v-if="!isCheckedInternal"></div>
<div class="check" :class="[size]" v-else>
  <div>v</div>
</div> -->
<div class="check" :class="[size]" @click="changeVal">
  <div v-if="isCheckedInternal">v</div>
</div>
<div><label class="label">{{label}}</label></div>
<div><span class="subLabel">{{subLabel}}</span></div>

주의: 위의 코드는 프로펠러를 사용합니다.isChecked이니셜라이저로만 사용합니다.부모에게 전달된 값이 변경되었을 경우isChecked, 자 컴포넌트는 그 변경을 받지 않습니다.선택하실 경우 추가해 주세요.watch상기 제안된 코드 외에:

  //...
  watch: {
    isChecked(newIsChecked) {
      this.isCheckedInternal = newIsChecked;
    }
  }
};

이상적

코드에는 몇 가지 개선 사항이 있을 수 있습니다.다음은 몇 가지 권장 사항입니다.

• subLabel소품은 다음과 같아야 한다.sub-label
• 을 방출하는 대신changeVal값, 방출update:isChecked그리고 나서:is-checked.sync="myCheckedValue"어버이에게.

이렇게 하면 소품에 내부적으로 바인딩할 수 있습니다.isChecked변경하지 않고 이벤트를 내보내고 부모가 변경되었을 때 반응합니다.isChecked대신.

더 많은 것을 하고 싶은 경우(그리고 가치가 있다고 생각되는 경우),model컴포넌트 옵션에서 사용할 수 있습니다.v-model대신:is-checked.sync.

아래 데모를 참조하십시오.

Vue.component("ax-checkbox", {
  template: '#axCheckboxTemplate',
  props: {
    label: String,
    subLabel: String,
    size: String,
    isChecked: false,
    checks: []
  },
  model: {       // <== this part to will also enable v-model besides :is-checked.async
    prop: 'isChecked',
    event: 'update:isChecked'
  },
  methods: {
    updateIsChecked() {
      this.$emit("update:isChecked", !this.isChecked);
    }
  }
})
new Vue({
  el: '#app',
  data: {
    myCheckedValueSync: false, myCheckedValueVModel: false,
  }
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

<template id="axCheckboxTemplate">
  <div class="checkBox-container">
    <input type="checkbox" :checked="isChecked" @change="updateIsChecked" />
    <div class="check" :class="[size]" @click="updateIsChecked">
      CLICK ME<div v-if="isChecked">v</div>
    </div>
    <label class="label">{{label}}</label><span class="subLabel">{{subLabel}}</span>
  </div>
</template>

<div id="app">
  <div class="filters">
    <pre>parent's myCheckedValueSync: {{ myCheckedValueSync }}</pre>
    <ax-checkbox label="Où :" sub-label="Ville" size="small" :is-checked.sync="myCheckedValueSync">
    </ax-checkbox>
      
    <pre>parent's myCheckedValueVModel: {{ myCheckedValueVModel }}</pre>
    <ax-checkbox label="Quoi :" sub-label="Thématique(s)" size="small" v-model="myCheckedValueVModel">
    </ax-checkbox>
  </div>
</div>

컴포넌트에 전달된 속성의 값을 갱신하려고 하는 것처럼 컴포넌트는 실제로는 커스텀 입력 컴포넌트입니다.이 토픽에 관한 뛰어난 Vue 문서를 참조해 주세요.아래에 아이디어를 정리했습니다.

Vue의 양방향 데이터 바인딩은 다음과 같이 처리됩니다.v-model고객님의 isChecked 속성에 적용됩니다.이거는 다음과 같습니다.v-model="isChecked"그것은 사실 통사적인 설탕이다:value="isChecked" @input="evt => isChecked = evt.target.value".

따라서 구성 요소에 대해 다음을 수행해야 합니다.

1. 의 이름을 갱신하다isChecked의 재산.value

2. 고객님의 고객명changeVal다음과 같은 입력 이벤트를 내보냅니다.

   changeVal() { this.$emit("input", !this.value); }

필요에 따라서, 또, 송신할 수도 있습니다.changeVal이벤트입니다.

언급URL : https://stackoverflow.com/questions/49052113/avoid-mutating-a-prop-vuejs-2