zoukankan      html  css  js  c++  java
  • 子组件使用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>
  • 相关阅读:
    【算法】 冒泡排序
    【算法】 插入排序
    【算法】 斐波那契数列
    【C#】 RBAC 权限框架
    【jQuery】 实用 js
    【jQuery】 Ajax
    【jQuery】 常用函数
    【jQuery】 资料
    【jQuery】 效果
    Linaro/Yocto/Openwrt
  • 原文地址:https://www.cnblogs.com/huangla/p/15671870.html
Copyright © 2011-2022 走看看