vue组件详解—组件与复用
智能甄选2018-04-12 08:01
一、什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
二、组件用法
组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。
2.1 全局注册后，任何V ue 实例都可以使用。如：
<div id="app1"><my-component></my-component></div>
Vue.component('my-component',{template: '<div>这里是组件的内容</div>'});var app1 = new Vue({ el: '#app1'});
要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜my-component></my- component> 的形式来使用组件了
template的DOM结构必须被一个元素包含， 如果直接写成“这里是组件的内容”， 不带“<div></ div ＞”是无法渲染的。（而且最外层只能有一个根的<div>标签）
2.2 在Vue 实例中，使用component选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。如：
<div id="app2"><my-component1></my-component1></div>
var app2 = new Vue({el: '#app2', components:{ 'my-component1': { template: '<div>这里是局部注册组件的内容</div>' } }});
2.3data必须是函数
除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data 、computed 、methods等。但是在使用data时，和实例稍有区别， data 必须是函数，然后将数据return 出去。
<div id="app3"><my-component3></my-component3></div>
Vue.component('my-component3',{template: '<div>{{message}}</div>', data: function(){ return { message: '组件内容' } }});var app3 = new Vue({ el: '#app3'});
一般return的对象不要引用外部的对象，因为如果return 出的对象引用了外部的一个对象， 那这个对象就是共享的， 任何一方修改都会同步。
所以一般给组件返回一个新的独立的data对象。
举报/反馈
0
0
收藏
分享
