在 vue 工程中,你是否以为下述方式可以正常使用?
<!-- 模板中使用全局对象属性 -->
<button @click="console.log(123)">点我</button>
如果项目中这样使用,vue2 会直接抛出警告:
[vue warn]: Property or method “console” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
vue3 会直接抛出错误
TypeError: : Cannot read properties of undefined (reading ‘log’)
模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象,比如 Math
和 Date
。没有显式包含在列表中的全局对象将不能在模板内表达式中访问。
如何注册能够被应用内所有组件实例访问到的全局属性?
vue2 实现
vue2 中支持的有限的全局对象列表
var allowedGlobals = makeMap(
'Infinity,undefined,NaN,isFinite,isNaN,' +
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
'require' // for Webpack/Browserify
)
vue2 中可以通过原型 Vue.prototype
进行扩展。
import Vue from 'vue'
Vue.prototype.console = { log: console.log }
vue3 实现
vue3 中支持的有限的全局对象列表文章来源:https://www.toymoban.com/news/detail-419817.html
const GLOBALS_WHITE_LISTED =
'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'
vue3 中提供了专门的配置属性 app.config.globalProperties
文章来源地址https://www.toymoban.com/news/detail-419817.html
<script setup>
import { getCurrentInstance } from 'vue'
getCurrentInstance().appContext.config.globalProperties.console = { log: console.log }
</script>
到了这里,关于vue 模板中使用 console.log的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!