Vue3如何像在prototype(原型)上挂载数据
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1. 首先,由于Vue团队对原型链的封装和改进,Vue3无法像Vue2一样直接在原型上放置数据,
下面是Vue2的做法:
//Vue2的main.js:
import Vue from 'vue'
Vue.prototype.myName = '张三';
//通过在Vue.prototype上放了一个myName的属性,其他组件都可以使用this.myName获取到张三
2. 在原型上挂载数据的作用是为了所有组件都可以通过 this. 获取到挂载的这个数据,
如果Vue3想要达到同样的效果,即(所有组件都可以通过this.myName获取到张三),需要用到vue3的mixin方法:
//Vue3的main.js
import { createApp } from 'vue'
import App from './App.vue'
//定义mixin
const myMixin = {
created() {
this.myName = '张三';
}
};
const app = createApp(App);
//使用mixin
app.mixin(myMixin);
这样,在其他组件使用的时候就可以从app的实例获取到'张三',达到与在Vue.prototype上挂载数据同样的作用
3. 任意组件中使用:
--组合式api
//组合式api没有this,所以要用getCurrentInstance方法获取vue实例,上边挂载的数据就在实例中
<script setup>
import {getCurrentInstance} from "vue"
const v3This = getCurrentInstance()
console.log(v3This.ctx.myName);//张三
//挂载的数据被放在了getCurrentInstance函数返回结果的ctx上,
</script>
--选项式api
//因vue3会兼容vue2的代码,所以也可以用vue2的选项式api的获取方式,直接从this上获取
<script>
export default {
mounted(){
console.log(this.myName)//张三
}
}
</script>
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)