首页 > 代码库 > vue-个人学习（三）----组件
vue-个人学习（三）----组件
组件内容格式：
在vue2.0中，不再支持片段式代码，因此组件内容最好都加上一个<div></div>的根标签，防止报错：
Vue.component(‘my-component‘, {
template: ‘<div>
<h3>单存在多个标签且没有根标签时，将报错</h3>
<h3>单存在多个标签且没有根标签时，将报错</h3>
<h3>单存在多个标签且没有根标签时，将报错</h3>
</div>‘
})
全局组件：通过全局注册的组件可以在任意一个vue中使用
要注册一个全局组件，你可以使用 Vue.component(tagName, options)。 例如：
Vue.component(‘my-component‘, {
template: ‘<div>A custom component!</div>‘
})
html端直接使用注册的组件名称作为标签即可：
<my-component></my-component>
自动渲染为：
<div>A custom component!</div>
局部组件：在单个vue中进行注册的组件，只能在此vue中使用
注册一个局部组件，首先在外部创建组件内容，如：
var Child = {
template: ‘<div>A custom component!</div>‘
}
然后通过vue中默认的components方法将组件进行注册：
new Vue({
el: "#box",
components: {
"xiao-aaa": Child
}
});
随后这个组件就可以在这个Vue所注册的元素下使用了：
<div id="box"> <xiao-aaa></xiao-aaa> </div>
vue-个人学习（三）----组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。