Vue - 组件化开发

最新推荐文章于 2022-09-21 13:16:15 发布

友人A ㅤ

最新推荐文章于 2022-09-21 13:16:15 发布

阅读量979

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/qq_46025031/article/details/107886600

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 组件化开发思想

标准
分治
重用
组合

组件化规范：Web Components

问题：

尽可能多的重用代码
自定义组件的方式不太容易（html, css 和 js）
多次使用组件可能导致冲突

解决：

Web Components通过封装好功能的定制元素解决上述问题。

官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

Vue部分实现了上述规范

2. 组件注册

2.1 全局组件注册语法

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

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>

组件注册使用示例：

    <div id="app">
        <button-counter></button-counter>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('button-counter', {
            data: function() {
                return {
                    count: 0
                }
            },
            template: '<button @click="count++">点击了{{count}}次</button>',

            // 上一行代码等价于:
            // template: '<button @click="handle">点击了{{count}}次</button>',
            // methods: {
            //     handle: function() {
            //         this.count++;
            //     }
            // }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>

2.3 组件注册注意事项

2.3.1 data 必须是一个函数

2.3.2 组件模板内容必须是单个根元素

// 报错，组件的模板应该确切的包含一个根元素
template: '<button @click="count++">点击了{{count}}次</button><button>测试</button>',

// 不报错，div将两个兄弟节点包起来
template: '<div><button @click="count++">点击了{{count}}次</button><button>测试</button></div>',

2.3.3 组件模板内容可以是模板字符串

模板字符串需要浏览器提供支持（ES6语法）

template: `
	<div>
		<button @click="count++">点击了{{count}}次</button>
        <button>测试</button>
	</div>
`,

可读性较好

2.3.4 组件命名方式

短横线方式 (推荐）
Vue.component ('my-component', { /*...*/ })
驼峰方式
Vue.component ('myComponent', { /*...*/ })

注意：

驼峰命名方式如果要在普通的标签中使用则需要改为短横线方式；
如果用在模板字符串中则可直接使用组件

    <div id="app">
        <button-counter></button-counter>
        <!-- <HelloWorld>{{msg}}</HelloWorld>  会报错 -->
        <hello-world></hello-world>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('HelloWorld', {
            data: function() {
                return {
                    msg: 'HelloWorld'
                }
            },
            template: '<div>{{msg}}</div>'
        })
        Vue.component('button-counter', {
            data: function() {
                return {
                    count: 0
                }
            },
            template: `
                <div>
                    <button @click="count++">点击了{{count}}次</button>
                    <button>测试</button>
                    <HelloWorld></HelloWorld>
                </div>
            `,
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>

2.4 局部组件注册

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

示例：

    <div id="app">
        <hello-world></hello-world>
        <hello-world1></hello-world1>
        <hello-world2></hello-world2>
        <test-com></test-com>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('test-com', {
            template: '<div>Test</div>'

            // 报错,局部组件只能在注册他的父组件中使用
            // template: '<div>Test<hello-world></hello-world></div>'
        })
        var HelloWorld = {
            data: function() {
                return {
                    msg: 'HelloWorld'
                }
            },
            template: '<div>{{msg}}</div>'
        }
        var HelloWorld1 = {
            data: function() {
                return {
                    msg: 'HelloWorld1'
                }
            },
            template: '<div>{{msg}}</div>'
        }
        var HelloWorld2 = {
            data: function() {
                return {
                    msg: 'HelloWorld2'
                }
            },
            template: '<div>{{msg}}</div>'
        }
        var vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                'hello-world': HelloWorld,
                'hello-world1': HelloWorld1,
                'hello-world2': HelloWorld2,
            }
        });
    </script>

3. Vue调试工具用法

3.1 调试工具安装

https://github.com/vuejs/vue-devtools

3.2 调试工具用法

在这里插入图片描述

4. 组件间数据交互

4.1 父组件向子组件传值

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

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

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

<menu-item title="来自父组件的数据"></menu-item>
<!-- 动态绑定 -->
<menu-item :title="title"></menu-item>

示例：

    <div id="app">
        <div>{{pmsg}}</div>
        <!-- 写死 -->
        <menu-item title="来自父组件的值"></menu-item>
        <!-- 动态绑定 -->
        <menu-item :title="ptitle" content="hello"></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('menu-item', {
            props: ['title', 'content'],
            data: function() {
                return {
                    msg: '子组件数据'
                }
            },
            template: '<div>{{msg + "---" + title + "---" + content}}</div>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            }
        });
    </script>

在这里插入图片描述

4.1.3 props属性名规则

在props中使用驼峰形式，模板中需要使用短横线形式
字符串形式的模板中没有这个限制

Vue.component ('menu-item'), {
	// 在JavaScript中是驼峰式的
	props: ['menuTitle'],
	template: '<div>{{ menuTitle }}</div>
})

// 在html中是短横线形式
<menu-item menu-title='hello'></menu-item>

示例：

    <div id="app">
        <div>{{pmsg}}</div>
        <!-- 必须使用短横线形式 -->
        <menu-item :menu-title="ptitle"></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('third-com', {
            props: ['testTitle'],
            template: '<div>{{testTitle}}</div>'
        })
        Vue.component('menu-item', {
            props: ['menuTitle'],
            // 字符串模板中可使用驼峰形式
            template: '<div>{{menuTitle}}<third-com testTitle="hello"></third-com></div>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            }
        });
    </script>

4.1.4 props属性值类型

字符串 String
数值 Number
布尔值 Boolean
数组 Array
对象 Object

    <div id="app">
        <div>{{pmsg}}</div>
        <!-- pnum和pboo的数值如果前面不加冒号，则结果都为string类型 -->
        <menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='parr' :pobj='pobj'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('menu-item', {
            props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
            template: `
                <div>
                    <div>{{pstr}}</div>
                    <div>{{pnum}}</div>
                    <div>{{pboo}}</div>
                    <ul>
                        <li :key='index' v-for='(item, index) in parr'>{{item}}</li>
                    </ul>
                    <div>
                        <span>{{pobj.name}}</span>
                        <span>{{pobj.age}}</span>
                    </div>
                </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                pstr: 'hello',
                parr: ['apple', 'orange', 'lemon'],
                pobj: {
                    name: 'lisi',
                    age: 12
                }
            }
        });
    </script>

4.2 子组件向父组件传值

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

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

4.2.2 父组件监听子组件的事件

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

示例：

    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
        <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
                          子组件向父组件传值-基本用法
                          props传递数据原则：单向数据流
                        */

        Vue.component('menu-item', {
            props: ['parr'],
            template: `
            <div>
              <ul>
                <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
              </ul>
              <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
            </div>
          `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                parr: ['apple', 'orange', 'banana'],
                fontSize: 10
            },
            methods: {
                handle: function() {
                    // 扩大字体大小
                    this.fontSize += 5;
                }
            }
        });
    </script>

4.2.3 子组件通过自定义事件向父组件传递信息—带参数

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

4.2.4 父组件监听子组件的事件

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

示例：

    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
        <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
                                          子组件向父组件传值-基本用法
                                          props传递数据原则：单向数据流
                                        */

        Vue.component('menu-item', {
            props: ['parr'],
            template: `
            <div>
              <ul>
                <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
              </ul>
              <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
            </div>
          `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                parr: ['apple', 'orange', 'banana'],
                fontSize: 10
            },
            methods: {
                handle: function(val) {
                    // 扩大字体大小
                    this.fontSize += val;
                }
            }
        });
    </script>

4.3 非父子组件间传值

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

组件之间通过事件中心来实现通信。

var eventHub = new Vue()

4.3.2 监听事件和销毁事件

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

4.3.3 触发事件

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

示例：

    <div id="app">
        <div>父组件</div>
        <div>
            <button @click='handle'>销毁事件</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              兄弟组件之间数据传递
            */
        // 提供事件中心
        var hub = new Vue();

        Vue.component('test-tom', {
            data: function() {
                return {
                    num: 0
                }
            },
            template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
            methods: {
                handle: function() {
                    hub.$emit('jerry-event', 2);
                }
            },
            mounted: function() {
                // 监听事件
                hub.$on('tom-event', (val) => {
                    this.num += val;
                });
            }
        });
        Vue.component('test-jerry', {
            data: function() {
                return {
                    num: 0
                }
            },
            template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
            methods: {
                handle: function() {
                    // 触发兄弟组件的事件
                    hub.$emit('tom-event', 1);
                }
            },
            mounted: function() {
                // 监听事件
                hub.$on('jerry-event', (val) => {
                    this.num += val;
                });
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                handle: function() {
                    hub.$off('tom-event');
                    hub.$off('jerry-event');
                }
            }
        });
    </script>

5. 组件插槽

5.1 组件插槽的作用

父组件向子组件传递内容

5.2 组件插槽基本用法

5.2.1 插槽位置

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

5.2.2 插槽内容

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

示例：

    <div id="app">
        <alert-box></alert-box>
        <alert-box>有bug</alert-box>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 组件插槽
        Vue.component('alert-box', {
            template: `
                <div>
                    <strong>ERROR:</strong>
                    <slot>默认内容</slot>
                </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>

5.3 具名插槽用法

5.3.1 插槽定义

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

5.3.2 插槽内容

	<base-layout>
        <h1 slot="header">标题内容</h1>

        <p>主要内容1</p>
        <p>主要内容2</p>

        <p slot="footer">底部内容</p>
    </base-layout>

    <div id="app">
        <base-layout>
            <p slot="header">标题信息</p>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <p slot="footer">底部信息</p>
        </base-layout>

        <base-layout>
            <!-- 临时信息，渲染结果只有p -->
            <template slot="header">
                <p>标题信息1</p>
                <p>标题信息2</p>
            </template>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <template slot="footer">
                <p>信息1</p>
                <p>信息2</p>
            </template>
        </base-layout>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 具名插槽
        Vue.component('base-layout', {
            template: `
                <div>
                    <header>
                        <slot name="header"></slot>
                    </header>
                    <main>
                        <slot></slot>
                    </main>
                    <footer>
                        <slot name="footer"></slot>
                    </footer>
                </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>

5.4 作用域插槽

应用场景：父组件对子组件的内容进行加工处理

5.4.1 插槽定义

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

5.4.2 插槽内容

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

示例：

    <div id="app">
        <fruit-list :list='list'>
            <template slot-scope='slotProps'>
                <strong v-if='slotProps.info.id==2' class="current">{{slotProps.info.name}}</strong>
                <span v-else>{{slotProps.info.name}}</span>
            </template>
        </fruit-list>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        Vue.component('fruit-list', {
            props: ['list'],
            template: `
        <div>
          <li :key='item.id' v-for='item in list'>
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: 'apple'
                }, {
                    id: 2,
                    name: 'orange'
                }, {
                    id: 3,
                    name: 'banana'
                }]
            },
        });
    </script>

在这里插入图片描述

6. 基于组件的案例

购物车案例需求分析

在这里插入图片描述

按照组件化方式实现业务需求

根据业务功能进行组件化划分
1. 标题组件（展示文本）
2. 列表组件（列表展示、商品数量变更、商品删除）
3. 结算组件（计算商品总额）

实现步骤

功能实现步骤
- 实现整体布局和样式效果
- 划分独立的功能组件
- 组合所有的子组件形成整体结构
- 逐个实现各个组件功能
  - 标题组件
  - 列表组件
  - 结算组件

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .container .cart {
            width: 300px;
            margin: auto;
        }
        
        .container .title {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*color: #fff;*/
        }
        
        .container .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }
        
        .container .total button {
            margin: 0 10px;
            background-color: #DC4C40;
            height: 35px;
            width: 80px;
            border: 0;
        }
        
        .container .total span {
            color: red;
            font-weight: bold;
        }
        
        .container .item {
            height: 55px;
            line-height: 55px;
            position: relative;
            border-top: 1px solid #ADD8E6;
        }
        
        .container .item img {
            width: 45px;
            height: 45px;
            margin: 5px;
        }
        
        .container .item .name {
            position: absolute;
            width: 90px;
            top: 0;
            left: 55px;
            font-size: 16px;
        }
        
        .container .item .change {
            width: 100px;
            position: absolute;
            top: 0;
            right: 50px;
        }
        
        .container .item .change a {
            font-size: 20px;
            width: 30px;
            text-decoration: none;
            background-color: lightgray;
            vertical-align: middle;
        }
        
        .container .item .change .num {
            width: 40px;
            height: 25px;
        }
        
        .container .item .del {
            position: absolute;
            top: 0;
            right: 0px;
            width: 40px;
            text-align: center;
            font-size: 40px;
            cursor: pointer;
            color: red;
        }
        
        .container .item .del:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <my-cart></my-cart>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var CartTitle = {
            props: ['uname'],
            template: `
            <div class="title">{{uname}}的商品</div>
            `
        }
        var CartList = {
            props: ['list'],
            template: `
            <div>
                <div :key='item.id' v-for='item in list' class="item">
                    <img :src="item.img"/>
                    <div class="name">{{item.name}}</div>
                    <div class="change">
                        <a href="" @click.prevent='sub(item.id)'>－</a>
                        <input type="text" class="num" :value='item.num' @blur='changeNum(item.id, $event)'/>
                        <a href="" @click.prevent='add(item.id)'>＋</a>
                    </div>
                    <div class="del" @click='del(item.id)'>×</div>
                </div>
            </div>
            `,
            methods: {
                changeNum: function(id, event) {
                    this.$emit('change-num', {
                        id: id,
                        type: 'change',
                        num: event.target.value
                    })
                },
                sub: function(id) {
                    this.$emit('change-num', {
                        id: id,
                        type: 'sub'
                    })
                },
                add: function(id) {
                    this.$emit('change-num', {
                        id: id,
                        type: 'add'
                    })
                },
                del: function(id) {
                    // 把id传递给父组件
                    this.$emit('cart-del', id);
                }
            }
        }
        var CartTotal = {
            props: ['list'],
            template: `
            <div class="total">
                <span>总价: {{total}}</span>
                <button>结算</button>
            </div>
            `,
            // 计算属性
            computed: {
                total: function() {
                    // 计算商品总价
                    var t = 0;
                    this.list.forEach(item => {
                        t += item.price * item.num;
                    });
                    return t;
                }
            }
        }
        Vue.component('my-cart', {
            data: function() {
                return {
                    uname: '张三',
                    list: [{
                        id: 1,
                        name: 'TCL彩电',
                        price: 1000,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 2,
                        name: '机顶盒',
                        price: 1000,
                        num: 1,
                        img: 'img/b.jpg'
                    }, {
                        id: 3,
                        name: '海尔冰箱',
                        price: 1000,
                        num: 1,
                        img: 'img/c.jpg'
                    }, {
                        id: 4,
                        name: '小米手机',
                        price: 1000,
                        num: 1,
                        img: 'img/d.jpg'
                    }, {
                        id: 5,
                        name: 'PPTV电视',
                        price: 1000,
                        num: 2,
                        img: 'img/e.jpg'
                    }]
                }
            },
            template: `
                <div class='cart'>
                    <cart-title :uname='uname'></cart-title>
                    <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>
                    <cart-total :list='list'></cart-total>
                </div>
            `,
            components: {
                'cart-title': CartTitle,
                'cart-list': CartList,
                'cart-total': CartTotal,
            },
            methods: {
                changeNum: function(val) {
                    // 分三种情况：输入域变更、加号变更、减号变更
                    if (val.type == 'change') {
                        // 根据子组件传递过来的数据更新list中对应的数据
                        this.list.some(item => {
                            if (item.id == val.id) {
                                item.num = val.num;
                                // 终止遍历
                                return true;
                            }
                        });
                    } else if (val.type == 'sub') {
                        // 减一操作
                        this.list.some(item => {
                            if (item.id == val.id) {
                                item.num -= 1;
                                // 终止遍历
                                return true;
                            }
                        });
                    } else if (val.type == 'add') {
                        // 加一操作
                        this.list.some(item => {
                            if (item.id == val.id) {
                                item.num += 1;
                                // 终止遍历
                                return true;
                            }
                        });
                    }
                },
                delCart: function(id) {
                    // 根据id删除list中对应数据
                    // 1. 找到id所对应数据的索引
                    var index = this.list.findIndex(item => {
                        return item.id == id;
                    });
                    // 2. 根据索引删除对应数据
                    this.list.splice(index, 1)
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

友人A ㅤ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue - 组件化开发

1. 组件化开发思想标准分治重用组合组件化规范：Web Components问题：尽可能多的重用代码自定义组件的方式不太容易（html, css 和 js）多次使用组件可能导致冲突解决：Web Components通过封装好功能的定制元素解决上述问题。官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_ComponentsVue部分实现了上述规范2. 组件注册2.1 全局组件注册语法Vue.component (组件
复制链接

扫一扫

专栏目录