Javascript Vue.js从父级中更新子组件数据

如何从父组件中更新子组件中的数据？我正在尝试从父对象中更新autores属性，并让该属性更新子对象数据。目前没有发生任何事情，我认为我没有正确链接数据。如果我将其作为数据添加到父组件中，那么当代码运行且看不到结果时，父组件将重新呈现

家长：

<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>
    <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>

以及：

然后，只要我更新

this.autores

，就可以在reset中的parent中的文本框中键入任何文本，就好像它正在重新提交整个组件一样。如何停止此操作？

家长：

<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>
    <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>

导出默认值{
道具：[“贷款人”]，
方法：{
editName:函数（lenderid，事件）{
var self=这个；
post（'/lenders/autocomplete'，{…}）
.then（功能（数据）{
self.$refs.autocompletessuggestions.autores=data.data.suggestions；
})
.catch（函数（错误）{
log（“获取自动完成时出错”）；
});
},
},
};

儿童：

<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>

<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>

{{res}}
导出默认值{
数据（）{
返回{
自动档：[]
};
},
};

您需要在父级

数据
中声明
autores
。然后传递给子组件：autores=“autores”
@ittus问题是，每当我更新
autores
的值时，它都会导致父组件重新渲染。然后，在文本框中键入的任何文本都会简单地重置回起始位置。如何在不重新提交的情况下更新父级中的数据？这似乎不起作用。子组件中仍然没有更新…？很抱歉，应该是这样：
self.$refs.autocompleteSuggestions.autores=data.data.suggestions