<!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>
Vue学习之自定义插件/创建一个自定义插件,实现登录页面
最新推荐文章于 2024-06-04 21:41:16 发布