vue组件篇（1）---基础

瞎说说：组件的基本概念
1. 什么是组件？
　　一个很有意思但是描述的很明白的回答：https://www.zhihu.com/question/29735633
　　组件（Component）是对数据和方法的简单封装；
　　是页面中的一小部分，具有独立的逻辑和功能或者界面，同时又能根据规定的
　　接口规则进行相互的融入，变成一整个完整的应用；
　　在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例...
　　so...图文并茂，易理解
　　

2. 使用组件的好处？
　　可重复使用，简化调试步骤，提升整个项目的可维护性，便于协同开发，提高开发效率
　　大家一起出力，各干各的，完全不会相互影响，实现真正的齐头并进
　　...

3. 组件的特点？
　　高内聚、低耦合、小型、可复用

进入正题：vue组件封装的正确姿势
1.父子组件的通信：
　　为了解耦，子组件数据基本来自父组件，父组件对子组件传餐，就需要用到props
　　（附上props文档地址：https://cn.vuejs.org/v2/guide/components-props.html），通常我们使用是这样的：
　　　　

*父组件中：*
    引入组件
        import publicpart from './publicPart'
    组册组件：
        components: {
            publicpart
        },
    应用组件：
        <publicpart
            v-bind:myData="item" 
            v-on:listenChildShopid="receiveChildShopid">
        </publicpart>
        receiveChildShopid(shopid) {
            //Todo
        }
*子组件中：*
    接收：props: ['myData']
    应用：<li>{{ myData.text }}</li>
    触发父组件的自定义事件：        this.$emit('listenChildShopid',this.shopid);                    

 

2.可能的情况下留一个占位（slot插槽）
　　一个通用的组件，往往不能完美的适应所有的应用场景。所以在开发通用组件的时候，只要不是独立性很高的组件，基本上都只完成80%的功能，剩下的20%让父组件通过slot来解决，即使还没有想好用来干什么（附上slot插槽的文档地址https://cn.vuejs.org/v2/guide/components-slots.html ）：

　　有些时候我们需要多个插槽。例如，一个假设的 <base-layout> 组件多模板如下:

<div class="container">
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="ads"></slot>
        <slot name="footer"></slot>
    </footer>
</div>
父组件中：
<layout>
    <h1 slot="header">Here might be a page title</h1>
    我有广告
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
    <slot slot="ads">我是广告</slot>
    <p slot="footer">Here's some contact info</p>
</layout>

 

3.尽量不要依赖Vuex
　　父子组件通信通过props和自定义事件来实现，非父子组件通常会使用Vuex维护全局状态，但是，Vuex的设计初衷是用来管理组件状态的，虽然可以用来传参，但是并不推荐，原因：
　　一方面，Vuex类似于一个全局变量，会一直占用内存，在写入数据庞大的state的时候，就会产生内存泄露；
　　另一方面，当页面刷新的时候，Vuex会初始化，同时也会丢失编辑过的数据（一般刷新页面需要保留数据可通过：url、或者sessionstorage、localstorage等）

4.合理运用 scoped 编写 CSS

　　在编写组件的时候，可以在 <style> 标签中添加 scoped，让标签中的样式只对当前组件生效，但是一味的使用 scoped，肯定会产生大量的重复代码所以在开发的时候，应该避免在组件中写样式，当全局样式写好之后，再针对每个组件，通过 scoped 属性添加组件样式。

 

总结：今天废话比较少....