Vue.js 상위 항목에서 하위 구성 요소 데이터 업데이트

Vue.js 상위 항목에서 하위 구성 요소 데이터 업데이트

부모 구성 요소 내에서 자식 구성 요소의 데이터를 업데이트하는 방법부모 내에서 자동 상속 속성을 업데이트하고 자식 데이터를 업데이트하도록 하려는 겁니다.현재 아무 일도 일어나지 않고 있어, 내가 데이터를 제대로 연결하지 못한 것 같아.상위 구성요소에 데이터로 추가하면 코드가 실행될 때 상위 구성요소가 다시 렌더링되고 결과가 표시되지 않는다.

상위:

<template>
    <div>
        <input @keyup="editName(lender.id, $event)">

            <autocomplete-suggestions :autores="[]"></autocomplete-suggestions>

    </div>
</template>

<script type="text/javascript">
    export default {
        props: ['lender'],

        data(){
            return {

            }
        },

        methods: {
            editName: function(lenderid, event) {

                var self = this;

                    axios.post('/lenders/autocomplete', {...})
                        .then(function (data) {

                            self.autores = data.data.suggestions;

                        })
                        .catch(function (error) {
                            console.log("Error occurred getting the autocomplete");
                        });


            },
        },
        watch: {

        },
        mounted: function() {

        }
    };
</script>

어린이:

<template>
    <div class="list">
        <div v-for="(res, i) in autores">{{res}}</div>
    </div>
</template>

<script type="text/javascript">
    export default {
        props: ['autores'],
        data(){
            return {

            }
        }
    };
</script>

업데이트:

부모 코드 변경 시:

data(){
    return {
        autores:[]
    }
},

및:

<autocomplete-suggestions :autores="autores"></autocomplete-suggestions>

업데이트 할 때마다 간단하게this.autores, 전체 구성요소를 다시 렌더링하는 것처럼 재설정할 때 부모 텍스트 상자에 입력된 텍스트.어떻게 멈출 수 있을까?

상위:

<template>
  <div>
    <input @keyup="editName(lender.id, $event)">
    <autocomplete-suggestions ref="autocompleteSuggestions"></autocomplete-suggestions>
  </div>
</template>

<script type="text/javascript">
  export default {
    props: ['lender'],
    methods: {
      editName: function (lenderid, event) {
        var self = this;
        axios.post('/lenders/autocomplete', {...})
          .then(function (data) {
            self.$refs.autocompleteSuggestions.autores = data.data.suggestions;
          })
          .catch(function (error) {
            console.log("Error occurred getting the autocomplete");
          });
      },
    },
  };
</script>

어린이:

<template>
  <div className="list">
    <div v-for="(res, i) in autores">{{res}}</div>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      autores: []
    };
  },
};
</script>

참조URL: https://stackoverflow.com/questions/52271842/vue-js-update-child-component-data-from-within-parent