Vue.prototype详解
你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:new Vue({beforeCreate: function () {c...
你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
Vue.prototype.$appName = 'My App'
这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
则控制台会打印出 My App。就这么简单!
为实例属性设置作用域的重要性
https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
“为什么 appName 要以 $ 开头?这很重要吗?它会怎样?”
这里没有什么魔法。$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
如果你写成:
Vue.prototype.appName = 'My App'
那么你希望下面的代码输出什么呢?
new Vue({
data: {
// 啊哦,`appName` *也*是一个我们定义的实例属性名!😯
appName: 'The name of some other app'
},
beforeCreate: function () {
console.log(this.appName)
},
created: function () {
console.log(this.appName)
}
})
日志中会先出现 “My App”,然后出现 “The name of some other app”,因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如 $_appName 或 ΩappName,来避免和插件或未来的插件相冲突。
例子:
mian.js
import pub from 'js/common/pubMethod'
Vue.prototype.$toHref = pub.toHref;
pubMethod.js
let pubMethod = {
toHref(url) {
if(!url || url == '' || url.trim() == '') return;
location.href = url;
}
}
vue文件中
<img @click="$toHref(imgdata[1])">
或者
this.toHref('http"//......')
更多推荐
所有评论(0)