首页 > 代码库 > 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-个人学习(三)----组件