函数式组件：通过函数调用的方式添加组件。
传统调用组件方式的困扰：
<Child v-if='isShow' :msg='msg'/>
<botton @click='btnClick' />
import Child from '@/components/Child'
let isShow = ref(false);
let msg = ref('111');
let btnClick = ()=>{
isShow.value = true;
msg.value = 222;
...
isShow.value = false;
}
1，这种非马上就要渲染的组件，需要大量代码去控制他，比如需要申明是否添加组件的变量，传递的属性变量==
2，其他地方也要这么写，让人头皮发麻
函数式调用组件：
let btnClick = ()=>{
createChildComponent("222");
}
//调用函数，就会自动添加组件，参数通过函数传递。
//调用方便，简单粗暴。
函数式组件的实现：toast举例
<!--Toast.vue 组件文件的创建是一样的-->
<template>
<div class="page">
<div class="toast">{{msg}}</div>
</div>
</template>
<script setup>
import { ref,defineProps } from 'vue';
let {msg} = defineProps({
msg:{
default:"请求成功！"
}
});
</script>
<style lang='scss' scoped>
.page{
position: fixed;
width: 100vw;
height: 100vh;
.toast{
background-color: rgba(0,0,0,0.6);
margin-bottom: 10px;
border-radius: 5px;
width: 160px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color:#eeeeee;
}
}
</style>
<!--Toast.js 里面导出创建上面toast组件的函数-->
import { createApp } from "vue";
import Toast from "@/components/Toast.vue";
//dom要挂载到的dom
export default function createToastComponent(msg) {
//createApp创建组件实例
let instance = createApp(Toast,{msg});
let mountNode = document.createElement('div');
document.body.appendChild(div);
//将组件挂载相应的dom上
instance.mount(mountNode);
setTimeout(()=>{
//卸载组件
instance.unmount();
//卸载组件后，把渲染的html一并清除
document.body.removeChild(mountNode);
},1000);
}
<!--Parent.vue调用-->
import createToastComponent from '@components/Toast.js'
let btnClick()=>{
createToastComponent('222');
}
说明：
1，CreateApp(component,prop)返回一个组件实例,第一个参数是个组件，第二个参数是要传递的属性
比如文件main.js 就有下面两句
import App from './App.vue' let app = createApp(App); 2，mount 将组件实例挂载到一个dom上，参数是一个dom元素(比如createElement,或queryElement的元素)或类选择器， mount挂载到dom上，会导致dom里面的所有内容全部清空。这就是上面的例子中为什么新建一个dom来挂载mount的原因。 mount挂载dom必须已经渲染出来，main.js 中的app.mount('#app'); 生成的index.html入口是下面这样的，通过defer加载js文件，保证下面的<div id='app'></div>先渲染出来<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>screen</title>
<script defer src="/js/chunk-vendors.js"></script><script defer src="/js/app.js"></script></head>
<body>
<noscript>
<strong>We're sorry but screen doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3，unmount卸载组件函数
标签：函数,dom,mount,msg,let,组件,import From： https://www.cnblogs.com/caojianbang/p/18503931