vue中，watch里，this为undefined的两种解决办法

提示：vue中，watch里，this为undefined的两种解决办法

前言

‌‌‌‌‌尽量使用方法1——使用function函数代替箭头函数()=>{}
【使用that方式，父组件中循环生成多个子组件时，有且只有最后一个子组件的watch对象生效问题】

一、问题

打印watch中this是undefined

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>
    export default {
      name: 'preview',
      props:{
        type:{
            type:String,
            default:'car',
        }
      },
      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(this,'-------------')
            },
            deep:true
        }
      },
    }
    </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>

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

打印watch中that(即this)


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',
        }
      },
      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,'-------------');
            },
            deep:true
        }
      },
    }
    </script>
  <style scoped></style>
  

三、方法2——使用that

打印watch中that(即this)


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',
        }
      },
      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,'-------------');
            },
            deep:true
        }
      },
      created(){
        that = this;
      },
    }
    </script>
  <style scoped></style>
  

总结

踩坑路漫漫长@~@