02-VUE组件化开发

一、组件注册

1.1、全局组件注册语法

Vue.component(组件名称, {
    data: 组件数据,
    template: 组件模板内容
})
Demo：
// 注册一个名为 button-counter 的新组件
Vue.component('button-counter', {
    data: function () {
        return {
        count: 0
        }
    },
    template: '<button v-on:click="count++">点击了{{ count }}次.</button>'
})

1.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>

 

1.3、组件注册注意事项

　　3.1. data必须是一个函数
　　分析函数与普通对象的对比
　　3.2. 组件模板内容必须是单个跟元素
　　分析演示实际的效果
　　3.3. 组件模板内容可以是模板字符串
　　模板字符串需要浏览器提供支持（ES6语法）

1.4、组件命名方式

>短横线方式
>驼峰方式

Vue.component('my-component', { /* ... */ })
Vue.component('MyComponent', { /* ... */ })

局部组件注册

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

二、VUE调试工具用法

三、组件间数据交互

3.1、父组件向子组件传值

1. 组件内部通过props接收传递过来的值

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

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

<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>

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

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

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

3.2、子组件向父组件传值

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

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

2. 父组件监听子组件的事件

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

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

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

4. 父组件监听子组件的事件

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

3.3、 非父子组件间传值

1. 单独的事件中心管理组件间的通信

var eventHub = new Vue()

2. 监听事件与销毁事件

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

3. 触发事件

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

四、组件插槽

4.1、组件插槽的作用

 

 

4.2 组件插槽基本用法

1. 插槽位置

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

2. 插槽内容

<alert-box>Something bad happened.</alert-box>

4.3 具名插槽用法

1. 插槽定义

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

 

2. 插槽内容

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

4.4 作用域插槽

应用场景：父组件对子组件的内容进行加工处理
1. 插槽定义

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

2. 插槽内容

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

五、基于组件的案例（购物车）