Vue基础——Vue组件化开发

目标：
　　能够知道组件化开发思想
　　能够知道组件的注册方式
　　能够说出组件间的数据交互方式
　　能够说出组件插槽的用法
　　能够说出Vue调式工具的用法
　　能够基于组件的方式实现业务功能
目录：
　　组件化开发思想
　　组件注册
　　Vue调试工具用法
　　组件间数据交互
　　组件插槽
　　基于组件的案例

1、组件化开发思想
把不同的功能封装到不同的组件中，组件可以通过组合的方式形成完整意义上的应用。

2、组件注册
2.1、全局组件注册语法

Vue.component(组件名称,{
    data:组件数据,
    template:组件模板内容
})

定义一个名为button-counter的新组件

Vue.component('button-counter',{
    data:function(){
        return {
            count:0
        }
    },
    template:'<button v-on:click="count++">点击了{{count}}次</button>'
})

2.2、组件用法

<div id="app">
    <button-counter></button-counter>
</div>
//可以多次使用，每个组件之间互不影响
<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

2.3、组件注册注意事项
data必须是一个函数
组件模板内容必须是单个根元素
组件模板内容可以是模板字符串
组件命名方式：
　　短横线方法
　　　　Vue.component('my-component',{/*...*/})
　　驼峰方式
　　　　Vue.component('MyComponent',{/*...*/})
　　注意：如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，

　　必须使用短横线的方式使用组件。
2.4、局部组件注册

var ComponentA = { /*...*/ }
var ComponentB = { /*...*/ }
var ComponentC = { /*...*/ }
new Vue({
    el:'#app',
    components：{
        'component-a':ComponentA,
        'component-b':ComponentB,
        'component-c':ComponentC,
    }
})    

3、Vue调试工具用法（Devtools）

　　克隆仓库
　　安装依赖包
　　构建
　　打开Chrome扩展页面
　　选中开发者模式
　　加载已解压的扩展，选择shells/chrome

4、组件间数据交互

4.1、父组件向子组件传值
组件内部通过props接受传递过来的值

Vue.component('menu-item',{
    props:['title'],
    template:'<div>{{title}}</div>'
})

父组件通过属性将值传递给子组件

//静态值
<menu-item title="来自父组件数据"></menu-item>
//动态值
<menu-item ：title="title"></menu-item>

props属性名规则
　　在props中使用驼峰形式，模板中需要使用短横线的形式
　　字符串模板中没有这个限制
　　如下所示：

Vue.component('menu-item',{
//在JavaScript中是驼峰式的
props:['menuTitle'],
template:'<div>{{menuTitle}}</div>'
})
<!-在html中是短横线方式的-->
<menu-item menu-title="nihao"></menu-item>

props属性值类型
　　字符串String
　　数值Number
　　布尔值Boolean
　　数组Array
　　对象Object

4.2、子组件向父组件传值
子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text")'>扩大字体</button>

父组件监听子组件事件

<menu-item v-on:enlarge-text='fontSize += 0.1'><menu-item>

子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text",0.1)'>扩大字体</button>

父组件监听子组件事件

<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>

4.3、非父子组件间传值
单独的事件中心管理组件间的通信

var eventHub = new Vue()

监听事件与销毁事件

eventHub.$on('add-todo',addTodo)
eventHub.$off('add-todo')

事件触发

eventHub.$emit('add-todo',id)

5、组件插槽
5.1、组件插槽的作用
父组件向子组件传递内容
5.2、组件插槽的基本用法
插槽位置

Vue.component('alert-box',{
    template:`
        <div class="demo-alert-box">
            <strong>Error!</strong>
            <slot></slot>
        </div>
    `
})    

插槽内容

<alert-box>something bad happened</alert-box>

5.3、具名插槽用法
插槽定义（组件插槽名为base-layout）

<div>
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>    

插槽用法

<base-layout>
    <h1 slot="header">标题内容</h1>
    <p>主要内容1</p>
    <p>主要内容1</p>
    <p slot="footer">底部内容</p>
</base-layout>

5.4、作用域插槽
应用场景：父组件对子组件的内容进行加工处理
插槽定义（插槽名称为：fruit-list）：

<ul>
    <li v-for="item in list" v-bind:key = "item.id">
        <slot v-bind:item = "item">
            {{item.name}}
        </slot>
    </li>
</ul>

插槽用法：

<fruit-list v-bind:list = "list">
    <template slot-scope = "slotProps">
        <strong v-if = "slotProps.item.current">
            {{slotProps.item.text}}
        </strong>
    </template>
</fruit-list>