vue整合uniapp_uni-app Vue 组件

Vue 组件

组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升。

uni-app搭建了组件的插件市场,可大幅提升开发者的效率。https://ext.dcloud.net.cn/

在项目的/component目录下存放组件,在要显示组件的页面中则分为3步:导入、注册和使用。

可以这个评分组件的使用为例,了解vue组件的使用方式。

import uniRate from "@/components/uni-rate/uni-rate.vue" //第一步,导入组件

export default {

components: {

uniRate //第二步,注册组件

}

}

l2.5.0+版本支持在pages.json内引入组件

luni-app只支持vue单文件组件(.vue 组件)。其他的诸如:动态组件,自定义 render,和

详细的非H5端不支持列表:

lSlot(scoped 暂时还没做支持)

l动态组件

l异步组件

linline-template

lX-Templates

lkeep-alive

ltransition (可使用 animation 或 CSS 动画替代)

l老的非自定义组件编译模式不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例: 样式是不会生效的)。建议更新为自定义组件模式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要重新渲染页面,可以使用 `uni.$emit` 和 `uni.$on` 方法来实现。首先,在需要重新渲染的页面中,注册一个事件监听器: ``` // MyPage.vue export default { created() { uni.$on('update', this.handleUpdate) }, destroyed() { uni.$off('update', this.handleUpdate) }, methods: { handleUpdate() { // 重新渲染页面的逻辑 } } } ``` 然后,在需要重新渲染的地方,使用 `uni.$emit` 方法触发事件: ``` // SomeComponent.vue export default { methods: { update() { uni.$emit('update') } } } ``` 至于多种设置全局变量及全局变量重新赋值,可以使用 VueX 进行状态管理。在 `store/index.js` 文件中定义全局变量和方法: ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { globalVariable: 'initial value' }, mutations: { setGlobalVariable(state, value) { state.globalVariable = value } }, actions: { updateGlobalVariable({ commit }, value) { commit('setGlobalVariable', value) } } }) export default store ``` 然后在需要使用全局变量的组件中,使用 `mapState` 将全局变量映射到组件的计算属性中,并使用 `mapActions` 将更新全局变量的方法映射到组件的方法中: ``` // SomeComponent.vue import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['globalVariable']) }, methods: { ...mapActions(['updateGlobalVariable']), updateValue(newValue) { this.updateGlobalVariable(newValue) } } } ``` 这样,就可以在组件中使用全局变量并更新它了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值