VueJs를 사용하여 하위 구성 요소에서 개체 속성 변경

VueJs를 사용하여 하위 구성 요소에서 개체 속성 변경

간단한 질문이 있는데 답을 찾을 수가 없어요.이 코드(자성 컴포넌트에 속합니까?좋은 관행인가요?

 export default {
  name: 'Wish',
  props: ['wish'],
  data () {
    return {
      isEditing: false
    }
  },
  methods: {
    completeWish () {
      this.wish.done = true
    },
   ...

아니면 exmit를 사용하여 부모의 wish 객체의 done 속성을 업데이트해야 합니까?

고마워요.

아마데가 말한대로 나쁜 습관이야

설계 관점에서 이벤트를 적절하게 수행하려면 이벤트를 사용해야 합니다.

<script>
  export default {
    name: 'Wish',
    props: ['wish'],
    methods: {
      completeWish () {
        this.$emit('wish-is-completed')
      }
    }
  }
</script>

에게는 '어느 쪽인가'가 .v-on:wish-is-completed="handleCompletedWish"들면 다음과 같습니다.

// Parent template
<template>
  <wish v-on:wish-is-completed="handleCompletedWish"></wish>
</template>

편집:

답변이 하향 투표된 것은 알고 있습니다.왜냐하면 실제로 소품 속성을 변형시킬 수 있고(직접 소품 참조가 아님) 경고를 받지 않기 때문입니다.

당신이 그렇게 해야 한다는 뜻인가요?

아니요.

소품은 단방향 데이터 흐름용으로 작성됩니다.부모에게 무언가를 알리기 위해 소품을 변환하면 암묵적이지 않기 때문에 상태 변화를 유지하기가 어려워집니다.이러한 경우 공식 문서에 제시된 바와 같이 자녀-> 부모 커뮤니케이션에 이벤트를 사용합니다.

모든 소품은 자녀 속성과 부모 속성 사이에 단방향 바인딩을 형성합니다.부모 속성이 갱신되면 자녀에게 흘러내리지만 그 반대는 아닙니다.이렇게 하면 하위 구성 요소가 실수로 상위 상태를 변형시켜 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.

Vue docs는 자 컴포넌트의 소품을 변환하지 않도록 권장합니다.

모든 소품은 자녀 속성과 부모 속성 사이에 단방향 바인딩을 형성합니다.부모 속성이 갱신되면 자녀에게 흘러내리지만 그 반대는 아닙니다.이렇게 하면 하위 구성 요소가 실수로 상위 상태를 변형시켜 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.

또한 상위 구성요소를 업데이트할 때마다 하위 구성요소의 모든 소품이 최신 값으로 새로 고쳐집니다.즉, 하위 구성 요소 내부의 소품을 변환하려고 하면 안 됩니다.이 경우 Vue가 콘솔에서 경고를 표시합니다.

그래서 저는 이것을 근거로 해서 나쁜 관행이라고 말하는 경향이 있습니다.

문서:

최신 JavaScript의 제한(및 Object.observe의 포기) 때문에 Vue는 속성 추가 또는 삭제를 검출할 수 없습니다.Vue는 인스턴스 초기화 중에 getter/setter 변환 프로세스를 수행하므로 Vue가 데이터 개체를 변환하여 비활성화하려면 데이터 개체에 속성이 있어야 합니다.

속성을 추가하거나 변경하려면 다음과 같이 Vue.set을 사용합니다.

this.$set(this.wish, 'done', true)

예: https://3xyx386q65.codesandbox.io/setProps 를 참조해 주세요.

코드 예(열린 컴포넌트/setProps/child Component.vue) 참조:https://codesandbox.io/s/3xyx386q65

메모!wish개체로 초기화!컴포넌트/setProps/setProps를 참조하십시오.예제 코드의 vue

언급URL : https://stackoverflow.com/questions/47731334/changing-a-property-of-an-object-in-child-component-using-vuejs