Vue JS의 상위 구성 요소에서 하위 구성 요소로 업데이트된 값을 보내는 방법

Vue JS의 상위 구성 요소에서 하위 구성 요소로 업데이트된 값을 보내는 방법

소품을 통해 부모 컴포넌트에서 자녀 컴포넌트로 변수를 전달합니다.그러나 일부 조작에서는 부모 컴포넌트의 버튼을 클릭했을 때 변수 값이 변경되지만 업데이트된 값을 자녀에게 전달하는 방법을 몰랐습니다.처음에 한 변수의 값이 false이고 부모 컴포넌트에 Edit 버튼이 있다고 가정합니다. 나는 Edit 버튼을 클릭하면 이 변수의 값을 변경하고 업데이트된 값을 부모 컴포넌트에서 자녀 컴포넌트로 전달합니다.

부모 컴포넌트와 자식 컴포넌트 간에 소품을 사용할 경우 속성 값이 동적으로 업데이트되어야 합니다.예시와 속성의 초기 상태에 따라 값이 자식 구성 요소에 올바르게 전달되지 않았을 수 있습니다.구문이 올바른지 확인하십시오.참고는 이쪽에서 확인하실 수 있습니다.

그러나 속성 값이 변경될 때마다 작업 집합을 수행하려는 경우 관찰자를 사용할 수 있습니다.

편집:

다음은 소품과 워처를 모두 사용한 예입니다.

HTML

<div id="app">
    <child-component :title="name"></child-component>
</div>

자바스크립트

Vue.component('child-component', {
  props: ['title'],
  watch: {
    // This would be called anytime the value of title changes
    title(newValue, oldValue) {
      // you can do anything here with the new value or old/previous value
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    name: 'Bob'
  },
  created() {
    // changing the value after a period of time would propagate to the child
    setTimeout(() => { this.name = 'John' }, 2000);
  },
  watch: {
    // You can also set up a watcher for name here if you like
    name() { ... }
  }
});

vue 워치를 사용하여 (props) 변수를 볼 수 있습니다.

예를 들어 다음과 같습니다.

<script>
export default {
  props: ['chatrooms', 'newmessage'],
  watch : {
    newmessage : function (value) {...}
  },
  created() {
    ...
  }
}
</script>

이것으로 당신의 문제가 해결되기를 바랍니다.:)

Dynamic Proposes를 사용할 수 있습니다.

이렇게 하면 데이터를 원하는 대로 부모 구성 요소에서 자식 구성 요소로 동적으로 전달합니다.

값이 객체인 속성은 특히 까다로울 수 있습니다.해당 개체에서 속성을 변경해도 상태는 변경되지 않습니다.따라서 하위 구성요소는 업데이트되지 않습니다.

다음의 예를 확인해 주세요.

// ParentComponent.vue

<template>
    <div>
        <child-component :some-prop="anObject" />
        <button type="button" @click="setObjectAttribute">Click me</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                anObject: {},
            };
        },
        methods: {
            setObjectAttribute() {
                this.anObject.attribute = 'someValue';
            },
        },
    };
</script>

// ChildComponent.vue

<template>
    <div>
        <strong>Attribute value is:</strong>
        {{ someProp.attribute ? someProp.attribute : '(empty)' }}
    </div>
</template>

<script>
    export default {
        props: [
            'someProp',
        ],
    };
</script>

사용자가 "클릭" 버튼을 클릭하면 로컬 개체가 업데이트됩니다.그러나 오브젝트 자체는 동일하고 속성만 변경되었으므로 상태 변경은 디스패치되지 않습니다.

이를 수정하기 위해setObjectAttribute다음과 같이 변경할 수 있습니다.

setObjectAttribute() {

    // using ES6's spread operator
    this.anObject = { ...this.anObject, attribute: 'someValue' };

    // -- OR --

    // using Object.assign
    this.anObject = Object.assign({}, this.anObject, { attribute: 'someValue' });

}

이렇게 함으로써anObject데이터 속성이 새 개체 참조를 수신하고 있습니다.그런 다음 상태가 변경되고 하위 구성 요소가 해당 이벤트를 수신합니다.

언급URL : https://stackoverflow.com/questions/46425633/how-to-send-updated-values-from-parent-component-to-child-component-in-vue-js