vue命令式组件封装以及使用

vue命令式组件封装以及使用

一. 组件封装

这是一个类似于element弹窗组件的命令式组件封装以及使用，还有js文件里书写html和css。相比传统组件有以下优点：

1.动态创建：Vue命令式组件可以在组件实例外部动态创建并挂载到DOM上，而传统组件需要在模板中进行声明和引用。这种灵活性对于某些场景非常有用，例如在某个事件触发后才创建并显示组件，或者根据特定条件动态生成组件。

2.即时销毁：Vue命令式组件可以在不需要的情况下立即销毁，而传统组件更倾向于保持其状态和生命周期，无法随时销毁。这种能力有助于优化性能和内存使用，尤其在大规模或复杂的应用中。

3.灵活性：Vue命令式组件可以接收外部数据、事件和回调，在实例化时进行传递，灵活度更高。传统组件通常需要在模板中进行数据绑定和事件监听，与组件实例外部的交互方式相对较少。

4.动态更新：Vue命令式组件可接受动态的数据更新，通过重新渲染组件实例来实现。这对于展示实时数据或响应性数据非常有用。传统组件通常在初始化时绑定静态的数据，需要手动更新或重新渲染组件才能展示新数据。

1.解决js文件中如何书写渲染html

render(ctx) {
        const {$props, $emit} = ctx;
        return <DivModal>
            <DivBox>
                <h4>{$props.msg}</h4>
                <DivButton click={$emit('onClick')}>确认</DivButton>
            </DivBox>
        </DivModal>;
    }
    /*使用render方法将html元素渲染到页面上，在showMsg函数中，创建了一个div元素，使用createApp方法创建一个vue实例app，将div挂载到app应用中。*/

2.解决js文件中如何将html元素加上样式

//package.json
"@styils/vue": "^1.1.6",

//showMsg.js
const DivModal = styled('div', {
    position: 'fixed',
    width: '100%',
    height: '100%',
    top: '0',
    left: '0',
    background: 'rgba(0,0,0,.4)',
})
/*参考react中的方法，使用styiles第三方库实现，将需要加样式的元素声明为一个对象代替，将对象赋予上样式完成。*/

使用时div 标签由 DivModal 代替：

//showMsg.js
render(ctx) {
        const {$props, $emit} = ctx;
        //div 标签由 DivModal 代替
        return <DivModal>
            ...
        </DivModal>;
    }

3.showMsg.js 组件全部代码

//showMsg.js
// import MessageBox from "@/components/MessageBox.vue";
import {createApp} from "vue";
import {styled} from "@styils/vue";
const DivModal = styled('div', {
    position: 'fixed',
    width: '100%',
    height: '100%',
    top: '0',
    left: '0',
    background: 'rgba(0,0,0,.4)',
})
const DivBox = styled('div', {
    position: 'fixed',
    width: '300px',
    height: '100px',
    top: '40%',
    left: 'calc(50% - 150px)',
    background: 'white',
    borderRadius: '10px',
    border: '2px solid #707070',
    color: '#000',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
})
const DivButton = styled('el-button', {
    cursor: 'pointer',
    borderRadius: '5px',
    padding: '5px 10px',
    background: '#409eff',
    color: 'white',
    fontSize: '14px',
})
const MessageBox = {
    props: {
        msg: {
            type: String,
            required: true,
        }
    },
    render(ctx) {
        const {$props, $emit} = ctx;
        return <DivModal>
            <DivBox>
                <h4>{$props.msg}</h4>
                <DivButton click={$emit('onClick')}>确认</DivButton>
            </DivBox>
        </DivModal>;
    }
}
function showMsg(msg, clickHandle) {
	//创建一个div元素
    const div = document.createElement('div')
    document.body.appendChild(div)
	//创建app应用
    const app = createApp(MessageBox, {
        msg, onClick() {
            clickHandle & clickHandle(() => {
            	//卸载app应用
                app.unmount(div);
                //移除div元素
                div.remove();
            })
        }
    });
    //将div挂载到app应用上
    app.mount(div);
}
export default showMsg;

二. 如何使用组件

1.导入

//MessageView.vue
import showMsg from '@/components/showMsg';

2.使用

//MessageView.vue
const clickHandle = () => {
  showMsg('我是弹出框,点击确认隐藏', (close) => {
    console.log('点击了确认')
    close();
  });
}

3.示例

//MessageView.vue



```**