vue定义和注册组件和子组件

在vue中,组件无疑是非常重要的,组件可以扩展HTML元素,使得代码具有更高的可重用性,本博客主要介绍组件和组件的定义和注册。


下面介绍定义组件的几种方法。

1、写法一

//1.0定义一个全局组件写法1
//定义组件
var login = Vue.extend({
template:'<h1>登录页面</h1>'
});

//注册组件
Vue.component('login',login);
<login></login>

效果:图片.png

2、写法二

//2.0定义一个全局组件写法2
Vue.component('register',{/**/
template:'<h1>注册页面</h1>'
});
<register></register>

效果:图片.png

3、写法三

/3.0定义一个账号组件写法3
Vue.component('account',{
template:'#account',
data:function () {
return{
msg: "登录页面"
}
},
methods: {
login:function () {
alert('login')
}
}
});
<account></account>

效果:图片.png

4、写法四

<script type="x-template" id="account1">
<a href="#">登录1</a> | <a href="#">注册1</a>
</script>
//4.0定义一个全局组件写法4
Vue.component('account1',{
template:'#account1'
});
<account1></account1>

效果:图片.png


子组件的定义和注册


//定义一个账号组件
Vue.component('account',{
template:'<p><h1>账号组件</h1><login></login></p>',
//在账号组件中定义一个登录的子组件
components:{
'login':{
template:'<h2>登录子组件</h2>'
}
}
});
<account></account>

效果图片.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容