vue在父组件内额外展示子组件的内容

背景

在开发中是否曾遇到过, 需要把子组件的额外内容展示到当前template里其他位置的情况呢?

比如父组件的导航栏需要根据子组件的类型展示不同按钮的情况, 麻烦点的做法是在父组件内, 根据子组件类型定义好所有的按钮, 然后分别展示. 🌚

实现是可以实现, 但是十分的不优雅, 与子组件通信也麻烦😑

那有没有什么简单点的方法呢?

思路

众所周知, Vue组件实际上都是一个个Object, 自定义的组件事件(emits)可以向父组件发送一个Object, 所以有没有可能通过向父组件emit一个组件Object的方式来实现这个场景呢?

经过试验, 单独定义一个组件确实可行, 但很多时候需要emit出去的组件, 可能只是几个按钮, 为几个按钮单独新建一个文件又很麻烦. 有没有什么简单的方式呢👀.

好了, 不卖关子了, 感谢 Anthony Fu 大佬在vueuse中贡献的createReusableTemplate, ,通过这个组件, 可以在template内定义局部可复用的组件, 将这个组件emit出去即可达到需要的效果.

Show me the code.

js 复制代码
///  ChildCmp.vue
<template>
    <DefineTemplate>
        <div>我命由我不由天</div>
    </DefineTemplate>

    <div class="child-cmp">
        没错我就是天.
    </div>
</template>

<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core'
import { onMounted } from 'vue';

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()

const emits = defineEmits(['showCmp']);

onMounted(()=>{
    emits('showCmp', ReuseTemplate);
})

</script>

<style scoped>
.child-cmp {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: red;
    background: gray;
    text-align: center;
}
</style>
js 复制代码
/// ParentView.vue
<template>
    <div class='xjc_container'>
        <div class="ParentView">
            <span>什么不由天, 我是天外天</span>
            <component v-if="extraCmp" :is="extraCmp"></component>
        </div>
        <ChildCmp @showCmp="handleShowCmp"></ChildCmp>
    </div>
</template>


<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';
import ChildCmp from './ChildCmp.vue';

const extraCmp = ref<any>();

function handleShowCmp(cmp: any) {
    extraCmp.value = cmp;
}
</script>


<style scoped lang="scss">
.ParentView{
    background: #7474ff;
    width: 200px;
    height: 200px;
    color: white;
}

</style>

实现效果如下, 相信看到这里的都能明白这个trick的意义🌚

相关推荐
码间舞2 分钟前
你不知道的pnpm!如果我的电脑上安装了nvm,切换node版本后,那么pnpm还会共享一个磁盘的npm包吗?
前端·代码规范·前端工程化
用户1512905452205 分钟前
itoa函数
前端
xiaominlaopodaren6 分钟前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js
薛定谔的算法8 分钟前
JavaScript数组操作完全指南:从基础到高级
前端·javascript·算法
拜无忧9 分钟前
前端,用SVG 模仿毛笔写字绘画,defs,filter
前端·css·svg
怪可爱的地球人10 分钟前
ts的迭代器和生成器
前端
FlowGram12 分钟前
Flowgram 物料库建设思考与实践
前端
用户221520442780014 分钟前
Promise实例方法和async、await语法糖
前端·javascript
普通码农14 分钟前
uniapp开发微信小程序使用takeSnapshot截图保存分享
前端
snows_l37 分钟前
MacOS 通过Homebrew 安装nvm
前端·macos