vue-个人学习----组件

Posted 2020-09-15

组件内容格式：

在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>