什么是组件？
vue中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘，键盘，鼠标），它就是一个具有独立逻辑或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。
页面就是由一个个类似这样的部分组成的，比如导航，列表，弹窗，下拉列表等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。
前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。
使用组件的好处？
1、提高开发效率
2、方便重复使用
3、简化调试步骤
4、提升整个项目的可维护性
5、便于协同开发
vue中的组件
vue中的组件是一个自定义标签，vue.js的编译器为它添加特殊功能
vue中的组件也可以扩展原生的html元素，封装可重用的代码
组件的基本组成：样式结构，行为逻辑，数据
注册组件
全局注册
可以在任何模板中使用，使用之前要先注册
语法：使用Vue.compontent(组件名，选项对象)
组件名命名约定：驼峰，烤串
在html中使用组件：使用烤串命名法
例如，注册Vue.compontent('my-compontent',{}),使用的时候<my-compontent></my-compontent>
<div id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
// 全局注册组件
Vue.component('cus-list',{
data(){
return {
}
},
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
})
new Vue({
el:"#app",
data:{
}
})
</script>
使用的时候，只要在页面上召唤这个组件就可使用，并且可以复用。
组件.png
局部注册
在组件实例中通过选项对象注册，只在所注册的作用域中使用
<div id="app">
<h2>自定义下拉框</h2>
<cus-list></cus-list>
<cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
new Vue({
el:"#app",
components:{
'cus-list':{
template:`
<section>
<div>
<div>
<input type="text">
<input type="button" name="" value="">
<span></span>
</div>
</div>
</section>
`
}
},
data:{
}
})
</script>
内容版权声明：除非注明，否则皆为本站原创文章。