Vue3 跨组件渲染模板

Vue3 跨组件渲染模板

现在有个需求,就是页面中某个组件渲染的时候动态改变另一个组件的某个部分。

下面是简化后的页面,页面有个 Header,内容中有个按钮可以切换两个组件。

代码也很简单:

html 复制代码
<!-- App.vue -->
<template>
    <div class="app">
        <header />
        <div class="app-content">
            <el-button @click="flag = !flag" type="primary">切换组件</el-button>
            <ComA v-if="flag" />
            <ComB v-else />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Header from './components/Header.vue'
import ComA from './components/ComA.vue'
import ComB from './components/ComB.vue'
const flag = ref(true)
</script>

现在是要当 A组件 渲染的时候,标题显示 A 组件 ,当 B组件 渲染的时候,标题显示 B 组件。

如果你使用过或者开发过微信小程序应该知道,当切换到某个页面的时候,小程序顶部的标题是可以改变的,在小程序中这是通过配置文件实现的。那么在网页端中怎么做呢?

下面给出两种方法。

方法 1:Teleport 组件

如果你学过 Vue3,应该已经想到了这个方案,就是在组件 AB 中使用 Vue3 的内置组件Teleport把模板渲染到 Header 当中去。

html 复制代码
<!-- ComA.vue -->
<template>
    <div class="com-a">
        这是页面A
        <Teleport to=".header .main">
            <div>A页面</div>
        </Teleport>
    </div>
</template>

<script setup lang="ts"></script>

这样大部分需求都解决了,但还是有些问题,就是不够灵活,比如标题有默认内容时,用 Teleport 组件会往后面插入内容,这就不是很好解决了。

方法 2:借助变量

大概思路就是,拿到要渲染的模板的虚拟DOM,保存到一个变量中,在 Header 中使用 component 组件渲染。

为了方便我们可以自定义一个组件,写在该组件的内容会保存在某个地方,并什么都不渲染。

ts 复制代码
// helper.ts
import { SetupContext, Slots, defineComponent, ref } from 'vue'
// 用来保存虚拟DOM的变量
const content = ref<Slots | null>(null)
// 自定义组件,使用该组件时,组件内的所有内容会被保存到变量content当中,原地什么都不渲染
const HeaderContent = defineComponent((_props: any, ctx: SetupContext) => {
    content.value = ctx.slots
    // 返回什么都不渲染的render函数
    return () => null
})
export { content, HeaderContent }

这逻辑就是这么简单。接下来只要在Header中使用component组件渲染刚才被保存下来的虚拟DOM的内容即可,并且你可以自己做一些逻辑判断,加默认内容等等。

html 复制代码
<!-- Header.vue -->
<template>
    <div class="header">
        <div class="left">
            <img :src="logoVue" alt="" />
        </div>
        <div class="main">
            <span v-if="!defaultCom">默认内容</span>
            <component v-else :is="defaultCom" />
        </div>
        <div class="right">
            <el-button type="primary">按钮</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { content } from '../utils/helper'
import logoVue from '@/assets/vue.svg'

const defaultCom = computed(() => {
    if (!content.value || (content.value && !content.value.default)) return
    return content.value.default
})
</script>

接下来只要使用自定义组件就可以了,内容的逻辑全部写在ComA中,但实际渲染会渲染在Header中,还支持响应式数据,这就是我们想要的。

html 复制代码
<!-- ComA.vue -->
<template>
    <div class="com-a">
        这是页面A
        <el-button type="primary" @click="num++">增加</el-button>
        <HeaderContent>
            <div>A页面{{ num }}</div>
        </HeaderContent>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { HeaderContent } from '../utils/helper'
    const num = ref(0)
</script>

看看效果

好了,思路提供给大家了,接下来要怎么玩你们自己决定吧。

相关推荐
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆4 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅4 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水5 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了5 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry6 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户26124583401618 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川8 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术9 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再10 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down