Vue学习之自定义插件/创建一个自定义插件，实现登录页面

最新推荐文章于 2024-05-11 10:40:39 发布

兰择南泽

最新推荐文章于 2024-05-11 10:40:39 发布

阅读量545

点赞数 1

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_64074057/article/details/134061841

版权

本文介绍了如何在Vue.js中创建和安装自定义组件，如登录和注册组件，通过`install`方法将其注册到Vue实例中并应用到HTML结构中。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <title>自定义组件</title>
</head>
<body>
    <div id="app">
        <login>登录</login>
        <register>注册</register>
        <h2>登录组件</h2>
    </div>
</body>
<script>
    let LoginPlugin = {}
    LoginPlugin.install = function(Vue){
        Vue.component('login',{
            render(createElement){
                return createElement('a', {
                    attrs:{
                        href:'#'
                    },
                },this.$slots.default)
            }
        })
        Vue.component('register',{
            render(createElement){
                return createElement('a', {
                    attrs:{
                        href:'#'
                    }, 
                }, this.$slots.default)
            }
        })
    }
    Vue.use(LoginPlugin)
    new Vue({
        el:'#app'
    })
</script>
</html>