码迷,mamicode.com
首页 > 其他好文 > 详细

vue-个人学习(三)----组件

时间:2017-05-01 16:08:51      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:ons   使用   rip   font   报错   .com   option   内容   asc   

组件内容格式:

在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-个人学习(三)----组件

标签:ons   使用   rip   font   报错   .com   option   内容   asc   

原文地址:http://www.cnblogs.com/goodxiao/p/6791884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!