vue中,watch里,this为undefined的两种解决办法
目录
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>
总结
踩坑路漫漫长@~@