组件化与模块化的区别
按照网站的功能或者性能可以分为好几个模块,组件则是某块部分功能,一个模块可以由好多组件组成。
比如:一个机器人由手、腿、头、身体组成,手和腿等就是几个模块,而手指头就是组件,这样说更加的形象。
创建组件
组件其实是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
组件可以相互嵌套调用,组件分为全局组件和局部组件
1.全局组件
<div id='app'>
<my-con />
</div>
<script>
Vue.component('myCon', {
template: '<div>hello</div>'
})
new Vue({
el: '#app',
})
</script>
全局组件可以在vue实例的任何地方调用,可以在其自身的子组件中被调用
2.局部组件
<div id='app'>
<my-con />
</div>
<script>
const myCon = {
template: `<div>hello</div>`
}
new Vue({
el: '#app',
components: { myCon } // components 不要写成 component
})
</script>
注意:
1.在使用组件的时候,vue的实例一定要有挂载对象el,否则vue的组件会被解析为一个自定义的dom对象
2.在组件(全局组件或者局部组件)中定义data值得写法一定要是一个函数的形式,返回一个对象
// 1.全局组件
Vue.component('myCon', {
template: '<div>hello {{mess}}</div>',
data() {
return {
mess: 'word'
}
}
})
// 2.局部组件
const myCon = {
template: `<div>hello</div>`,
data(){
return {
mess:'word'
}
}
}
这样的原因:
组件是为了能多次调用且相互之间不受影响而创建的,如果直接以对象的形式存在
data:{
mess:‘word’
}
则会相互影响,一个值改变,则只有使用该组件的所有地方都会发生改变,所以尤大神,在创建vue的时候,将组件中的data值定义为一个函数,返回值为一个对象,每次调用该组件都会创建一个新的对象,相互之间并不会受到影响。
补充:
我们一般在创建vue实例的时候data值得定义
new Vue({
el: '#app',
components: { myCon },
data:{
mess: 'word1'
}
})
其实我们也可以这样写
new Vue({
el: '#app',
components: { myCon },
data() {
return {
mess: 'word1'
}
}
})