提示：vue中，watch里，this為undefined的兩種解決辦法

文章目錄

• • @[TOC](文章目錄)
• 前言
• 一、問題
• 二、方法1——使用function函數代替箭頭函數()=>{}
• 三、方法2——使用that
• 總結

前言

?????盡量使用方法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>

總結

踩坑路漫漫長@~@