运行环境
“vue”: “^2.6.11”,
“typescript”: “~3.8.3”,
问题重现
html
<el-tree
:data="treeOptions.data"
node-key="id"
@check="treeOptions.checkChange"
/>
js
问题1:
export default class GoodsClassify extends Vue {
private treeOptions = {
data: [],
// 默认解析规则
defaultProps: {
children: "children",
label: "name"
},
checkChange: () => {
console.log(this) // GoodsClassify
}
};
// 问题1: 如果this 指向 GoodsClassify 而不是VueComponent,那么页面回显就会有问题,而且访问别的属性不是同一个
问题2:
export default class GoodsClassify extends Vue {
private treeOptions = {
data: [],
// 默认解析规则
defaultProps: {
children: "children",
label: "name"
},
checkChange() {
console.log(this) // VueComponent
}
};
// 调用
private created() {
this.treeOptions.checkChange()
}
}
// 问题2: 如果是js中单独调用 结果正常VueComponent,
如果是HTml中调用, 这里this指向为null, 找不到this
解决办法
方案一:
export default class GoodsClassify extends Vue {
private treeOptions = {
data: [],
// 默认解析规则
defaultProps: {
children: "children",
label: "name"
},
checkChange:this.checkChange
};
private checkChange() {
console.log(this) // VueComponent
}
}
// 推荐做法
方案二:改变调用方式
<el-tree
:data="treeOptions.data"
node-key="id"
@check="checkChange"
/>
export default class GoodsClassify extends Vue {
private treeOptions = {
data: [],
// 默认解析规则
defaultProps: {
children: "children",
label: "name"
}
};
private checkChange() {
console.log(this) // VueComponent
}
}