vue使用watch监听props的技巧分享

 更新时间:2023年12月08日 10:56:48   作者:刚学HTML  
这篇文章主要为大家详细介绍了vue使用watch监听props的一些小建议,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下

vue 使用watch监听props的一些小建议

当在watch里面给data赋值,请使用深拷贝。

<template>
  <div class="container">
    <div class="left">
      <div class="button_group">
        <!--        <button @click="random_change_data">修改某一列的数据</button>-->
      </div>
    </div>
    <div class="right son">
      <son_component :table_data="table_data"></son_component>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import son_component from "@/components/son_component.vue";

export default Vue.extend({
  name: "FatherComponent",
  components: {
    son_component,
  },
  data() {
    return {
      table_data: [],
    };
  },
  mounted() {
    this.init_data();
  },
  methods: {
    init_data() {
      for (let i = 0; i < 100; i++) {
        (
          this.table_data as never as [
            { name: string; age: number; check: boolean }
          ]
        ).push({
          name: `alex${i}`,
          age: i,
          check: false,
        });
      }
      console.log(this.table_data);
    },
    generate_random_number(max: number) {
      return Math.floor(Math.random() * max) + 1;
    },
    // random_change_data() {
    //   /**
    //    * 随机修改某一列的数据
    //    */
    //   const index = this.generate_random_number(this.table_data.length);
    //   // (this.table_data[index] as { age: number }).age = 100;
    //   const item = this.table_data[index] as { age: number };
    //   item.age = 100;
    //   this.$set(this, index, item);
    // },
  },
});
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.left,
.right {
  width: 50vw;
}

.left {
  margin: 0 auto;
  line-height: 100%;
  text-align: center;
}
</style>
	<template>
  <div>
    <div class="table_data">
      <table>
        <thead>
          <tr>
            <th>名字</th>
            <th>年龄</th>
            <th><input type="checkbox" v-model="is_all" /></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td><input type="checkbox" v-model="item.check" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { cloneDeep } from "lodash";

export default Vue.extend({
  name: "son_component",
  data() {
    return {
      is_all: true,
      selection: [], // 选择的数据
      data: [], // 表格数据
    };
  },
  props: {
    table_data: {
      type: Array,
      default: () => [],
    },
    choice_list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    choice_list: {
      handler(new_: [string], old_) {
        console.log("choice_list 发生了改变");
        /**
         * 根据名字去判断是否选择
         */
        if (new_) (this.selection as any) = this.choice_list.concat(new_);
      },
      immediate: true,
      deep: true,
    },
    table_data: {
      handler(new_) {
 					(this.data as any) = this.table_data;
      }
    },
  },
});
</script>

<style scoped></style>

这个时候如果修改data里面的值,是会触发watch里面的监听的,所以这里建议使用深拷贝

在线代码

到此这篇关于vue使用watch监听props的技巧分享的文章就介绍到这了,更多相关vue watch监听props内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue多页面项目中路由使用history模式的方法

    vue多页面项目中路由使用history模式的方法

    这篇文章主要介绍了vue多页面项目中路由如何使用history模式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue 服务端渲染SSR示例详解

    Vue 服务端渲染SSR示例详解

    这篇文章主要介绍了Vue 服务端渲染SSR示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue图片加载与显示默认图片实例代码

    vue图片加载与显示默认图片实例代码

    这篇文章主要为大家详细介绍了vue图片加载与显示默认图片的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • el-form表单验证的一些实用方法总结

    el-form表单验证的一些实用方法总结

    表单校验是注册环节中必不可少的操作,表单校验通过一定的规则来确保用户提交数据的有效性,下面这篇文章主要给大家介绍了关于el-form表单验证的一些实用方法,需要的朋友可以参考下
    2023-01-01
  • Vue实现简单计算器

    Vue实现简单计算器

    这篇文章主要为大家详细介绍了Vue实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Vue qiankun微前端实现详解

    Vue qiankun微前端实现详解

    这篇文章主要为大家介绍了Vue qiankun微前端实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue elementui动态添加el-input实例代码

    vue elementui动态添加el-input实例代码

    最近遇到一个新的需求,需要动态添加el-input,这篇文章主要给大家介绍了关于vue elementui动态添加el-input的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vuejs2 + Webpack框架里,模拟下载的实例讲解

    Vuejs2 + Webpack框架里,模拟下载的实例讲解

    今天小编就为大家分享一篇Vuejs2 + Webpack框架里,模拟下载的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3在history模式下如何通过vite打包部署白屏

    Vue3在history模式下如何通过vite打包部署白屏

    这篇文章主要介绍了Vue3在history模式下如何通过vite打包部署白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue中使用vux配置代码详解

    Vue中使用vux配置代码详解

    这篇文章主要介绍了Vue中使用vux配置代码详解,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09

最新评论