当前位置：首页 > news >正文

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

news 来源：原创 2025/6/7 12:05:39

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

文章目录

@[TOC](文章目录)

前言
一、问题
二、解决方法——使用function函数代替箭头函数()=>{}
总结

前言

‌‌‌‌‌问题：子组件用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>