vue使用watch监听props的技巧分享
作者:刚学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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!