vue.prototype和vue.use,vue.prototype.$store
本文将结合示例代码介绍Vue中Vue.prototype的使用。本文通过示例代码非常详细。有需要的朋友就跟着下面的边肖学习吧。
:
目录
1.基本例2。设置实例原型3的范围。注册和使用全局变量4。原型方法5的背景。应用实例5.1介绍axiosVue.prototype，vue.component1和Vue.use difference 1，Vue.prototype2，vue.component3，Vue.use我们可能会在很多组件中发现一些差异，在这种情况下，通过在原型上定义它们，可以使它们在Vue的每个实例中都可用。
1. 基本示例
向main.js中的Vue.prototype添加一个变量
Vue.prototype.$appName=我的应用程序
这样，$appName在所有Vue实例中都可用，甚至在创建实例之前。
新Vue({
创建之前：函数(){
console.log(这个。$appName)
}
})
控制台会打印出我的App，就这么简单！
2. 为实例prototype设置作用域
appName为什么以开头？这很重要吗？这里没有魔法。开始？这很重要吗？这里没有魔法。开始？这很重要吗？这里没有魔法。是一个简单的属性约定，在Vue的所有实例中都可用。这样做将避免与已定义的数据、方法和计算属性发生冲突。
如果我们设定：
Vue.prototype.appName=我的应用程序
那么下面的代码会输出什么呢：
新Vue({
数据：{
//啊哈，appName也是我们定义的实例属性名！
appName:“某个其他应用程序的名称”
},
创建之前：函数(){
console.log(this.appName)
},
已创建：函数(){
console.log(this.appName)
}
})
在日志中，“我的应用程序”将首先出现，然后“某个其他应用程序的名称”将出现，因为this.appName在实例创建后被数据覆盖。我们通过设置实例属性的范围来避免这种情况。您也可以根据自己的喜好使用自己的约定，比如设置实例属性的范围来避免这种事情。您也可以根据自己的喜好使用自己的约定，比如设置实例属性的范围来避免这种事情。也可以根据自己的喜好使用自己的约定，比如_appName或者 appname，避免与插件或者以后的插件冲突。
3. 注册和使用全局变量
每个组件都是一个vue实例。Vue.prototype添加了一个变量，但是只给每个组件添加了一个属性。此属性的值不是全局的。
例如，下面的例子：
//main.js
从“vue”导入Vue
从导入应用程序。/App
从导入路由器。/路由器
从导入存储。/商店
Vue.config.productionTip=false
Vue.prototype.$appName=main
新Vue({
埃尔： #app ，
店，
路由器，
组件：{ App }，
模板：“App/”，
})
//所有组件都用属性$appName注册，该属性的初始值为“main”。所有组件都可以用这个来访问这个变量。$ appName
//如果组件中没有赋值，初始值都是“main”
//home.vue
模板
差异
div @click=changeName 更改名称/div
div @click=gotoTest2 转到test2/div
/div
/模板
脚本
导出默认值{
方法：{
changeName(){
这个。$appName=test1
},
gotoTest2(){
这个。$router.push(/about )
}
}
}
/脚本
//about.vue
模板
差异
div { {这个。test2/div中的$appName}}
/div
/模板
单击主目录中的更改名称，并跳转到about，它仍然在test2中显示main。
如果要实现全局变量的功能，就需要把属性改成引用类型。
vue . prototype . $ appName={ name: main }
用这个。$appName.name以更改并引用相应的值。
输入about后，显示test2中的test1。
4. 原型方法的上下文
在JavaScript中，原型的方法会获取实例的上下文，也就是说，你可以用这个来访问：数据、计算属性、方法或者实例上定义的其他任何东西。
让我们在一个名为$reverseText的方法中使用它：
//main.js
vue . prototype . $ reverse text=function(property name){
这个[属性名]=这个[属性名]。拆分(“”)。反向()。联接(“”)
}
//相应的组件
脚本
导出默认值{
data() {
返回{
消息：“你好”
}
},
已创建(){
console . log(this . message)//= Hello
这个。$reverseText(message )
console . log(this . message)//= olleH
}
}
/脚本
5. 应用示例
5.1 引入 axios
npm安装vue-axios -保存
npinstallqs . js-save//的作用是直接将json格式转换成数据格式。
//mian.js
从“vue”导入Vue
从“axios”导入axios
从“qs”导入qs
Vue.prototype.$axios=axios //全局注册，用这个。$axios
Vue.prototype.qs=qs //全局注册，使用this.qs
//相应的组件
脚本
导出默认值{
data(){
返回{
用户Id:666，
令牌：，
}
},
已创建(){
这个。$axios({
方法： post ，
URL:“API”，
Data:this.qs.stringify({ //这里是发送到后台的数据
userId:this.userId
token:this.token，
})
}).然后((response)={ //这里用的是ES6的语法。
Console.log(response) //请求成功返回的数据
}).catch((错误)={
Console.log(error) //请求失败返回的数据
})
}
}
/脚本
Vue.prototype、Vue.component和Vue.use区别
1、Vue.prototype
当需要在许多地方使用该定义但不想污染全局范围时，该定义可以在每个Vue实例中使用。
参考：3359 cn . vue js . org/v2/cookbook/adding-instance-properties . html
$表示这是一个在所有Vue实例中都可用的属性。
常用于方法、变量等。
从“电子海图”导入电子海图
Vue.prototype.$echarts=echarts
2、vue.component
全球注册组件，
第一个参数是调用组件时写入的组件名。
第二个参数是引入组件时写入的名称。
可用于注册自定义组件。
从“基本/加载”导入myLoading
Vue.component(myLoading ，my loading)；
3、Vue.use
同样是全局注册，和component的区别在于收到的参数必须有install方法。
通常用于注册第三方插件
从“element-ui”导入ElementUI
vue . use(element ui)；
关于Vue中Vue.prototype使用的详细说明，本文到此为止。有关Vue.prototype使用的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。