子组件使用watch监听父组件数据的变化也随之变化

1.父子之间的通信我们通过props传递信息，但是父组件的数据会随时变化，子组件也要跟随变化。

使用watch监听父组件传递过来的值。

父组件中(search为子组件)：

<template>
   <img src="../assests/search.png" alt="" @click="getSearch()" /><input
          type="text"
          v-model="searchText"
          placeholder="可搜索当前生效图片"
        />
  <search  :list="searchList" />
</template>
<script>
methods:{
  getSearch() {
      if (this.searchText != "") {
       //发送axios请求
        searchData(this.searchText).then((res) => {
          if (res.data.status == 0) {
            if (res.data.data.length != 0) {
              this.searchList = res.data.data;
            } else {
              this.searchList = null;
            }
          }
          console.log("search", res.data.data);
        });
        this.isSearch = true;
      }
    },
}
</script>

子组件中(主要监听的是 list，然后重新赋值)：

<template>
  <div
        class="li"
        style="overflow: hidden"
        v-for="item in listData"
        :key="item.vId"
      >
{{item.name}}
</div>
</template>
<script>
export default {
  props:['list'],
data() {
    return {
      listData: this.list||null,
    };
  },
 watch: {
        list: {
            handler(newVal, oldVal) {
                 this.listData=newVal;
            },
            deep: true
        }
    },
}
</script>