父组件中循环生成多个子组件时，有且只有最后一个子组件的watch对象生效问题及解决办法

提示：父组件中循环生成多个子组件时，有且只有最后一个子组件的watch对象生效问题及解决办法

前言

‌‌‌‌‌问题：子组件用that解决watch无法获取this，this为undefined问题，循环生成多个子组件，只有最后一个子组件的watch触发了多次；
原因：that是声明在打包的js文件中，每个子组件都会覆盖that为当前组件的this，最后that指向最后一个组件的this;

一、问题

打印watch中this，和selectCount，是五个重复的组件count：5,5,5,5,5

1、selectCom.vue

<template><div class="select_com"><div class="select_com_content" ref="printImgContent"><el-select v-model="model" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></div></div></template><script>let that;export default {name: 'preview',props:{type:{type:String,default:'car',},selectCount:{type:Number,default:0,},},data () {return {model:'',optionsData:{car:[{name:'丰田',value:'1',},{name:'大众',value:'2',},{name:'起亚',value:'3',},{name:'别克',value:'4',},],animal:[{name:'猫',value:'1',},{name:'狗',value:'2',},{name:'牛',value:'3',},{name:'羊',value:'4',},],},options:[],}},watch:{type:{handler:()=>{console.log(that,that.selectCount,'-------------');},deep:true}},created(){that = this;},}</script><style scoped></style>

2、home.vue组件

<template><div class="home_box"><el-button @click="changeType('car')">car</el-button><el-button @click="changeType('animal')">animal</el-button><selectCom :type="type"></selectCom></div>
</template><script>import selectCom from './preview/selectCom';export default {name: 'Hmoe',components:{selectCom},data () {return {type:'car',}},methods: {changeType(type){this.type = type;},}}</script><style scoped></style>

二、解决方法——使用function函数代替箭头函数()=>{}

打印watch中this，和selectCount，是五个单独组件count：1,2,3,4,5

selectCom.vue

<template><div class="select_com"><div class="select_com_content" ref="printImgContent"><el-select v-model="model" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></div></div></template><script>export default {name: 'preview',props:{type:{type:String,default:'car',},selectCount:{type:Number,default:0,},},data () {return {model:'',optionsData:{car:[{name:'丰田',value:'1',},{name:'大众',value:'2',},{name:'起亚',value:'3',},{name:'别克',value:'4',},],animal:[{name:'猫',value:'1',},{name:'狗',value:'2',},{name:'牛',value:'3',},{name:'羊',value:'4',},],},options:[],}},watch:{type:{handler:function(){console.log(this,this.selectCount,'-------------');},deep:true}},}</script><style scoped></style>

总结

踩坑路漫漫长@~@