在js文件中写el表达式取不到值的原因可能是因为js文件的加载顺序在vue组件实例挂载之前,解决方法一般有两种:使用Vue.mixin全局混入方法和使用this.$nextTick()方法。
使用Vue.mixin全局混入方法
- 首先在main.js中定义一个mixin,定义一个生命周期函数created,将所有需要共享的数据,例如公共的配置信息,挂到this.$options全局配置中,这样每个组件都可以通过this.$options访问到该对象。
Vue.mixin({
created: function () {
this.$options.sharedData = {
someValue: 'Any value you need'
};
}
});
- 在组件中使用时,直接调用this.$options.sharedData.someValue来使用。例如:
export default {
methods: {
showSomeValue() {
console.log(this.$options.sharedData.someValue);
}
}
};
使用this.$nextTick()方法
- 在mounted操作中使用定时器设置一段时间延迟,等待DOM操作完成,之后就可以使用el表达式。
export default {
mounted () {
setTimeout(() => {
// 获取组件中的el元素
const el = this.$el.querySelector('.el-table__body-wrapper')
console.log('el', el) // 输出为DOM元素
}, 0)
}
}
- 在mounted操作中使用this.$nextTick()方法等待DOM操作完成之后就可以使用el表达式。
export default {
mounted () {
this.$nextTick(() => {
// 获取组件中的el元素
const el = this.$el.querySelector('.el-table__body-wrapper')
console.log('el', el) // 输出为DOM元素
})
}
}
以上两种方法都可以解决js文件中使用el表达式无法获取数据的问题,通过全局混入方法和this.$nextTick()方法可以在mounted完成渲染之后,获取到正确的el表达式值。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:在js文件中写el表达式取不到值的原因及解决方法 - Python技术站