美文网首页
uniapp挂载公共组件到App.vue根目录并渲染

uniapp挂载公共组件到App.vue根目录并渲染

作者: 时子释 | 来源:发表于2023-08-05 09:55 被阅读0次

uniapp的根目录的template并没有暴露出来,所以无法通过在template中注册组件名的方式来注入组件,针对这种无tempalte的vue文件,可以使用new Vue() + render的方式挂载一个Vue组件,如下在App.vue中:
第一步,将mWaterText组件注册并挂载到#watermark中

// app.vue文件
import mWaterText from '@/components/m-water-text.vue'
import Vue from 'vue'

// 在onLaunch中


// 在app.vue挂载水印功能
new Vue({
    render: (createElement) => {
        return createElement(mWaterText, {
            props: {
                // 将变量name作为props传递给组件
                watermark: this.$store.state.vuex_runtimeData.name + '@' + this.$store.state.vuex_runtimeData.employeeNo
            }
        });
    }
}).$mount('#watermark');

第二部,去根目录下的template.h5.html的body标签中,注入一个div,加上id属性为watermark

// template.h5.html文件
<body>
    <div id="watermark"></div>

相关文章

  • 公共组件抽离(render props)

    公共组件的实时鼠标位置 传递给子组件 结构 公共组件的render方法 把挂载props上的方法返回要渲染的容器 ...

  • react的生命周期

    挂载阶段的组件生命周期 我们将reactjs组件渲染并构造DOM元素然后塞入页面的过程称为组件的挂载, 我们知道在...

  • react生命周期总结

    React的生命周期从广义上分为三个阶段:挂载、渲染、卸载 挂载:在组件实例被创建并插入到dom中时,生命周期调用...

  • 组件的生命周期

    挂载 组件实例被创建并插入到 DOM 中会触发挂载 constructor componentWillMount ...

  • Vue 的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么?

    渲染过程:⽗组件挂载完成⼀定是等⼦组件都挂载完成后,才算是⽗组件挂载完,所以⽗组件的mounted在⼦组 件mou...

  • 彻底理解React组件的生命周期(一)

    React组件的生命周期,主要分为挂载、更新以及移除阶段的生命周期。所谓挂载指的是组件从初始化到渲染到页面的过程。...

  • 组件引入挂载

    App.vue里面挂载其他页面组件 Home.vue News.vue Header.vue

  • uniApp 使用vuex

    vuex 就不多做介绍啦,大家都明白uniApp内已经内嵌了vuex,直接挂载使用就好啦 根目录创建store目录...

  • react生命周期

    生命周期一般为挂载阶段,渲染/更新,卸载,还有错误处理 挂载 当组件实例被创建并插入 DOM 中时,其生命周期调用...

  • React生命周期

    一、类组件生命周期流程 一、首次渲染 创建 constructor 渲染 render 挂载 componentD...

网友评论

      本文标题:uniapp挂载公共组件到App.vue根目录并渲染

      本文链接:https://www.haomeiwen.com/subject/gpvbpdtx.html