您好,登录后才能下订单哦!
这篇文章主要讲解了“Vue中Vue.prototype如何用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中Vue.prototype如何用”吧!
在main.js中添加一个变量到 Vue.prototype
Vue.prototype.$appName = 'My App'
这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以
new Vue({ beforeCreate: function () { console.log(this.$appName) } })
控制台会打印出 My App,就这么简单!
为什么 appName 要以 开头?这很重要吗?这里没有什么魔法。 开头? 这很重要吗? 这里没有什么魔法。开头?这很重要吗?这里没有什么魔法。 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
如果我们设置:
Vue.prototype.appName = 'My App'
那么如下的代码输出什么:
new Vue({ data: { // 啊哦,`appName` 也是一个我们定义的实例 property 名! 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 覆写了。我们通过 为实例property设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如为实例 property 设置作用域来避免这种事情发生。 你还可以根据你的喜好使用自己的约定,诸如为实例property设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如_appName 或 ΩappName,来避免和插件或未来的插件相冲突。
每个组件都是一个vue实例,Vue.prototype加一个变量,只是给每个组件加了一个属性,这个属性的值并不具有全局性。
比如以下例子:
// main.js import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false Vue.prototype.$appName = 'main' new Vue({ el: '#app', store, router, components: { App }, template: '<App/>', }) // 给所有组件注册了一个属性 $appName,赋予初始值 'main' ,所有组件都可以用 this.$appName 访问此变量; // 如果组件中没有赋值,初始值都是'main'
// home.vue <template> <div> <div @click="changeName">change name</div> <div @click="gotoTest2">goto test2</div> </div> </template> <script> export default { methods:{ changeName(){ this.$appName = "test1" }, gotoTest2(){ this.$router.push('/about') } } } </script>
// about.vue <template> <div> <div>{{this.$appName}} in test2</div> </div> </template>
点击 home 中的 change name 再跳转about,about里面还是显示 main in test2
如果要实现全局变量的功能,需要把属性变为引用类型
Vue.prototype.$appName = { name: 'main' }
后面使用 this.$appName.name 改变和引用相应的值
这进入 about 后显示 test1 in test2
在 JavaScript 中一个原型的方法会获得该实例的上下文,也就是说可以使用 this 访问:数据、计算属性、方法或其它任何定义在实例上的东西。
让我们将其用在一个名为 $reverseText 的方法上:
// main.js Vue.prototype.$reverseText = function (propertyName) { this[propertyName] = this[propertyName] .split('') .reverse() .join('') }
// 相应组件 <script> export default { data() { return{ message: 'Hello' } }, created() { console.log(this.message) // => "Hello" this.$reverseText('message') console.log(this.message) // => "olleH" } } </script>
npm install vue-axios --save npm install qs.js --save //它的作用是能把json格式的直接转成data所需的格式
// mian.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios Vue.prototype.qs = qs //全局注册,使用方法为:this.qs // 相应组件 <script> export default{ data(){ return{ userId:666, token:'', } }, created(){ this.$axios({ method:'post', url:'api', data:this.qs.stringify({ //这里是发送给后台的数据 userId:this.userId, token:this.token, }) }).then((response) =>{ //这里使用了ES6的语法 console.log(response) //请求成功返回的数据 }).catch((error) =>{ console.log(error) //请求失败返回的数据 }) } } </script>
在多个地方都需要使用但不想污染全局作用域的情况下,这样定义,在每个 Vue 实例中都可用。
$ 表示这是一个在 Vue 所有实例中都可用的属性
常用于方法、变量等
import echarts from 'echarts' Vue.prototype.$echarts = echarts
全局注册组件,
第一个参数是调用组件时写的组件名
第二个参数是引入组件时写的名称
可用于注册自定义组件
import myLoading from 'base/loading' Vue.component('myLoading',myLoading);
同样是全局注册,和component的区别是接收的参数必须有install方法
常用于注册第三方插件
import ElementUI from 'element-ui'; Vue.use(ElementUI);
感谢各位的阅读,以上就是“Vue中Vue.prototype如何用”的内容了,经过本文的学习后,相信大家对Vue中Vue.prototype如何用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。