[聚合文章] Vue2.0系列(四)Vue 组件及父子组件通信

JavaScript 2017-12-19 11 阅读

什么是组件?

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>

使用的时候,只要在页面上召唤这个组件就可使用,并且可以复用。


注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。