vue组件化开发

 一、概念

　　什么是组件，我个人理解为积木。而用vue创建项目就要一个搭积木的过程。

二、语法

　　vue无非也就是一种框架，先理解其核心内容之后再来操作。

　　2.1引包

　　　　vue有两个版本。不同的版本有不同的语法

　　2.2开辟一个vue接管的实例对象

　　　　完成这件事，首先要在dom中开辟一个空间

　　dom:

　　　　<div id='app'></div>

　　js:

　　　　实例化一个vue对象

　　　　　　new Vue({

　　　　el:'#app',

　　　　data:{}

　　　　})

　　三、全局创建组件（也可以创建局部组件）：

　　　　3.1创建组件构造器：

　　　　　　var parent=Vue.entend({

　　　　　　template:'<h1>hello</h1>'  //这里就是组件的内容，可以理解为积木的形状，当然你也可以引用标签dom  template:'#demo'(这个demo是页面中的script或者template的ID)

})

　　　　3.2注册组件

　　　　积木已经做好了现在就是要给积木命名好可以各尽其责。

　　　　Vue.component('my-component',parent)  //这里的两个参数分别表示页面标签和构造器的名字

　　四、简写构造组件

　　　　简写的关键就是把构造器放到了注册里面

　　　　Vue.component('my-component',{

　　　　template:'<div>hello</div>'

})

　　　　如上就简写了一个组件在页面中<my-component></my-component>这样使用

　　五、嵌套组件

　　　　嵌套组件就牵扯出父组件与子组件，关键点：1，子组件应该在父组件构造器中注册和使用。所以子组件只能在父组件中使用。

　　　但是组件构造器还是各自执行。

　　　　var child=Vue.extend({

　　　　template:'thankyou'

})

　　　　var parent=Vue.extend({

　　　　template:'hello <child-companent></child-component>',//子组件要在父组件的template中使用

　　　　components:{  //注意后面的s

　　　　　　'child-companent':child

}

　

})

　　Vue.component('parent-companent',parent);

html:

<parent-companent></parent-companent>//父组件可在全局使用

　　六、嵌套组件传值。

　　　　6.1说道组件中的数据，与Vue实例化的数据不同，Vue规定组建中的data必须是一个回调函数

　　　　　　Vue.component('parent',{

　　　　data:function(){

　　return{a:1}

}　　

})