设计网站 f怀化网页

提示：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>

总结

踩坑路漫漫长@~@