Vue基础（三）——Vue组件化开发（基础用法）

最新推荐文章于 2024-08-17 18:11:44 发布

1oneLee

最新推荐文章于 2024-08-17 18:11:44 发布

阅读量186

点赞数 1

分类专栏： Vue.js 文章标签： javascript vue.js html5 css3 es6

本文链接：https://blog.csdn.net/qq_27575925/article/details/109819625

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

作者：雨的印记
主题：Vue基础
文档：[Vue官网](https://cn.vuejs.org/)

1. 组件化开发思想

1.1 现实中的组件化思想体现

在这里插入图片描述

1.2 编程中的组件化思想体现

在这里插入图片描述
一张网页可以分成头部、导航栏、主体部分、侧边栏、底部等几个部分，可以把不同的部分看成是一个组件。同时网页的每一个组件之间也存在兄弟、父子等关系。可以通过组件的组合来形成一款完整的应用。（组件化开发核心思想：就是把不能的功能封装到不同的组件中，然后组件可以通过组合的方式形成完整的应用）

1.3 组件化规范：Web Components

在这里插入图片描述

2. 组件注册

2.1 全局组件注册语法

在这里插入图片描述

2.2 组件用法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册
        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 += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

在这里插入图片描述
点击按钮：

每点击以此加2

注意：组件是可以重用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册
        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 += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

把这个组件拷贝多次可以发现每个组件之间是相互独立的，因为每一个组件都是一个独立的实例，彼此之间的数据是相互独立，是不会相互影响的。

在这里插入图片描述

2.3 组件注册注意事项

data必须是一个函数
- 分析函数与普通对象的对比
组件模板必须是单个根元素
- 分析演示实际的效果

当将组件中的 data属性由函数形式改为对象形式，可以看到控制台报错了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册
        Vue.component('button-counter', {
            data: {
                count: 0,
            },
            // template: '<button @click="count++">点击了{{ count }}次</button>',
            template: '<button @click="handle">点击了{{ count }}次</button>',
            // template: '<button @click="handle">点击了{{ count }}次</button><button>测试</button>',

            methods: {
                handle: function () {
                    this.count += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

在这里插入图片描述
这就说明 data 必须是一个函数

如果我们在 template 中再加一个按钮，且这两个按钮是兄弟关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册
        Vue.component('button-counter', {
            data: function () {
                return { 
                    count: 0
                }
            },
            // template: '<button @click="count++">点击了{{ count }}次</button>',
            // template: '<button @click="handle">点击了{{ count }}次</button>',
            template: '<button @click="handle">点击了{{ count }}次</button><button>测试</button>',

            methods: {
                handle: function () {
                    this.count += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

在这里插入图片描述
浏览器报错：编译模板错误
因为这两个元素是兄弟关系，没有根元素。可以在最外面加上div标签，将其包起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册
        Vue.component('button-counter', {
            data: function () {
                return { 
                    count: 0
                }
            },
            // template: '<button @click="count++">点击了{{ count }}次</button>',
            // template: '<button @click="handle">点击了{{ count }}次</button>',
            template: '<div><button @click="handle">点击了{{ count }}次</button><button>测试</button></div>',

            methods: {
                handle: function () {
                    this.count += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

在这里插入图片描述

组件模板内容可以是模板字符串
- 模板字符串需要浏览器提供支持（ES6语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册
        Vue.component('button-counter', {
            data: function () {
                return { 
                    count: 0
                }
            },
            // 模板字符串的使用可以增加代码的可读性
            template: `<div>
                            <button @click="handle">点击了{{ count }}次</button>
                            <button>测试123</button>
                        </div>`,

            methods: {
                handle: function () {
                    this.count += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

在这里插入图片描述

组件命名方式
- 短横线方式：my-component
- 驼峰方式： MyComponent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <!-- 必须使用短横线的形式使用组件 -->
        <Hello-world></Hello-world>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册（全剧组件）
        // 如果使用驼峰式命名组件， 那么在使用组件的时候，只能在字符串模板中用驼峰的方式，但是在普通的标签模板中必须使用短横线的方式使用组件。
        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="handle">点击了{{ count }}次</button>
                            <button>测试123</button>
                            <HelloWorld></HelloWorld>
                        </div>`,

            methods: {
                handle: function () {
                    this.count += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

HelloWorld组件我们在使用的时候命名方式是驼峰命名法，在模板引擎中我们使用组件时使用的是驼峰命名，但是在普通的标签模板中我们如果使用的是驼峰命名发的话会报错。必须使用短横线命名的方式。

在这里插入图片描述
改成短横线的形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <!-- 必须使用短横线的形式使用组件 -->
        <hello-world></hello-world>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册（全剧组件）
        // 如果使用驼峰式命名组件， 那么在使用组件的时候，只能在字符串模板中用驼峰的方式，但是在普通的标签模板中必须使用短横线的方式使用组件。
        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="handle">点击了{{ count }}次</button>
                            <button>测试123</button>
                            <HelloWorld></HelloWorld>
                        </div>`,

            methods: {
                handle: function () {
                    this.count += 2;
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
        })
    </script>
</body>
</html>

在这里插入图片描述

2.4 局部组件注册

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <hello-world></hello-world>
        <hello-tom></hello-tom>
        <hello-jerry></hello-jerry>
        <test-com></test-com>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册（局部组件注册）
        // 局部组件只能在注册他的父组件中使用

        Vue.component('test-com', {
            template: '<div>Test</div>'
        });

        var HelloWorld = {
            data: function(){
                return {
                    msg: 'HelloWorld'
                }
            },
            template: '<div>{{ msg }}</div>'
        };
        var HelloTom = {
            data: function(){
                return {
                    msg: 'Tom'
                }
            },
            template: '<div>{{ msg }}</div>'
        };
        var HelloJerry = {
            data: function(){
                return {
                    msg: 'HelloJerry'
                }
            },
            template: '<div>{{ msg }}</div>'
        };

        var vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                'hello-world': HelloWorld,
                'hello-tom': HelloTom,
                'hello-jerry': HelloJerry
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
注意：

注册的局部组件只能在它的父组件中使用，在别的地方是没有办法使用的。
全局注册的组件可以在所有地方使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <hello-world></hello-world>
        <hello-tom></hello-tom>
        <hello-jerry></hello-jerry>
        <test-com></test-com>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件注册（局部组件注册）
        // 局部组件只能在注册他的父组件中使用

        Vue.component('test-com', {
            // 这一行代码会报错 局部注册的组件 hello-world 不能再全局组件中使用
            template: '<div>Test<hello-world></hello-world></div>'
        });

        var HelloWorld = {
            data: function(){
                return {
                    msg: 'HelloWorld'
                }
            },
            template: '<div>{{ msg }}</div>'
        };
        var HelloTom = {
            data: function(){
                return {
                    msg: 'Tom'
                }
            },
            template: '<div>{{ msg }}</div>'
        };
        var HelloJerry = {
            data: function(){
                return {
                    msg: 'HelloJerry'
                }
            },
            template: '<div>{{ msg }}</div>'
        };

        var vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                'hello-world': HelloWorld,
                'hello-tom': HelloTom,
                'hello-jerry': HelloJerry
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

3. Vue调试工具

3.1 调试工具安装

在这里插入图片描述

3.2 调试工具用法

在这里插入图片描述

4. 组件间数据交互

4.1 父组件向子组件传值

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

在这里插入图片描述

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <!-- 在父组件中直接通过属性的方式传递给子组件，然后子组件通过 props接收title传递过来的值  content属性没有传递给子组件 所以打印出来的结果有 undefined-->
        <menu-item title="来自父组件的值"></menu-item>
        <!-- 父组件通过属性将值传递给子组件 这两个属性都传递给了子组件 其中 title 是通过动态绑定的属性值来传递的-->
        <menu-item :title="ptitle" content="hello"></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 父组件向子组件传值: 在父组件中直接通过属性的方式传递给子组件，然后子组件通过 props 中的 title 接收
        Vue.component('menu-item', {
            // 组件内部通过 props 接收传递过来的值
            props: ['title', 'content'],
            data: function(){
                return {
                    msg: '子组件本身的数据'
                }
            },
            template: '<div>{{msg + "----" + title + "----" + content}}</div>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中的内容',
                ptitle: '动态绑定属性'
            },
        })
    </script>
    
</body>
</html>

在这里插入图片描述
3. props属性名规则

在 props 中使用驼峰形式，模板中需要使用短横线的形式

字符串形式的模板中没有这个限制

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <menu-item :menu-title="ptitle"></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            // 组件内部通过 props 接收传递过来的值
            props: ['menuTitle'],
            template: '<div>{{menuTitle}}</div>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            },
        })
    </script>
    
</body>
</html>

可以看到html页面：

父组件中内容
动态绑定属性

现在若将：

<menu-item :menu-title="ptitle"></menu-item>

改为：

<menu-item :menuTitle="ptitle"></menu-item>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <menu-item :menuTitle="ptitle"></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('menu-item', {
            // 组件内部通过 props 接收传递过来的值
            // props 使用的是驼峰形式 但在模板（html）中需要使用短横线的形式
            props: ['menuTitle'],
            template: '<div>{{menuTitle}}</div>' // 字符串模板中没有这个限制
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            },
        })
    </script>
    
</body>
</html>

html页面显示为：

父组件中内容

同时可以看到控制台打印出了警告信息：

vue.js:640 [Vue tip]: Prop "menutitle" is passed to component <Anonymous>, but the declared prop name is "menuTitle". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "menu-title" instead of "menuTitle".

再看下面这个程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <menu-item :menu-title="ptitle"></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        Vue.component('third-com', {
            // 组件内部通过 props 接收传递过来的值
            // props 使用的是驼峰形式 但在模板（html）中需要使用短横线的形式
            props: ['testTitle'],
            template: '<div>{{testTitle}}</div>' // 字符串模板中没有这个限制
        });
        Vue.component('menu-item', {
            // 组件内部通过 props 接收传递过来的值
            // props 使用的是驼峰形式 但在模板（html）中需要使用短横线的形式
            props: ['menuTitle'],
            template: '<div>{{menuTitle}}<third-com testTitle="hello"></third-com></div>' // 字符串模板中没有这个限制
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            },
        })
    </script>
    
</body>
</html>

得到的html页面如下：

父组件中内容
动态绑定属性
hello

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

首先看字符串类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <menu-item :pstr='pstr'></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 父组件向子组件传值——props属性名类型

        Vue.component('menu-item', {
            props: ['pstr'],
            template: `
                <div>{{ pstr }}</div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                pstr: 'hello'
            },
        })
    </script>
    
</body>
</html>

可以看到HTML页面：

父组件中内容
hello

看一下其他的基本数据类型的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <menu-item :pstr='pstr' :pnum='12' :pboo='true'></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 父组件向子组件传值——props属性名类型

        Vue.component('menu-item', {
            props: ['pstr', 'pnum', 'pboo'],
            template: `
                <div>
                    <div>{{ pstr }}</div>
                    <div>{{ 12 + pnum }}</div>
                    <div>{{  pboo }}</div>
                </div>  
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                pstr: 'hello'
            },
        })
    </script>
    
</body>
</html>

得到的html结果：

父组件中内容
hello
24
true

最后看一下数组以及对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='parr' :pobj='pobj'></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 父组件向子组件传值——props属性名类型

        Vue.component('menu-item', {
            props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
            template: `
                <div>
                    <div>{{ pstr }}</div>
                    <div>{{ 12 + 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', 'banana'],
                pobj: {
                    name: 'lisi',
                    age: 12
                }
            },
        })
    </script>
    
</body>
</html>

得到的html结果为：
在这里插入图片描述
注意：对于数字和布尔类型的props属性值，如果使用 v-bind 进行了动态绑定，则在子组件中就可以得到对应类型的数据，如果没有使用 v-bind 进行动态绑定则得到的数据都是字符串类型的数据。

4.2 子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <menu-item :parr='parr'></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 子组件向父组件传值-基本用法
        // props 传递数据原则：单向数据流

        Vue.component('menu-item', {
            props: ['parr'],
            template: `
                <div>
                    <ul>
                        <li :key='index' v-for='(item,index) in parr'>{{ item }}</li>
                    </ul>
                    <button @click='parr.push("lemon")'>点击</button>
                </div>
            `
        });

        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                parr: ['apple', 'orange', 'banana']
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

点击按钮确实可以实现子组件向父组件传递值的效果，我们是不是就要使用这种方法来实现呢？实际上不是这样的，因为props这个属性传递数据有一个原则：就是单项数据流。就是只允许父组件向子组件传递数据，而不允许子组件直接操作props中的数据。为什么有这样一个原则呢？因为如果子组件可以直接操作props中的数据的话，数据的控制逻辑就比较复杂，不太容易控制，所以这种单向的处理逻辑相对还是比较清晰，Vue的设计者也推荐我们使用这种方式单向的数据流。

那应该怎么做呢？

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

比如在组件中点击按钮来控制父组件中文字的大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{ pmsg }}</div>
        <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 子组件向父组件传值-基本用法
        // props 传递数据原则：单向数据流

        Vue.component('menu-item', {
            props: ['parr'],
            template: `
                <div>
                    <ul>
                        <li :key='index' v-for='(item,index) in parr'>{{ item }}</li>
                    </ul>
                    <button @click='parr.push("lemon")'>点击</button>
                    <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>
</body>
</html>

在这里插入图片描述
点击子组件的按钮确实可以影响父组件的样式。

总结：首先子组件需要触发自定义事件，让父组件监听子组件的事件，当子组件触发自定义事件的时候，会把事件抛向父组件。父组件触发会执行相应的动作。最好不要通过props去直接操作数据。

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

在这里插入图片描述
就是子组件在触发这个事件的时候可以通过第二个参数把这个值传递给父组件。父组件如何接受传递过来的值呢？父组件中通过$event来接收参数。

父组件监听子组件的事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{ pmsg }}</div>
        <!-- 接受子组件传递过来的值我们使用的是 $event 这个是固定的 -->
        <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 子组件向父组件传值-基本用法
        // props 传递数据原则：单向数据流

        Vue.component('menu-item', {
            props: ['parr'],
            template: `
                <div>
                    <ul>
                        <li :key='index' v-for='(item,index) in parr'>{{ item }}</li>
                    </ul>
                    <button @click='parr.push("lemon")'>点击</button>
                    <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
                    <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
                </div>
            `
        });

        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                parr: ['apple', 'orange', 'banana'],
                fontSize: 10
            },
            methods: {
                handle: function(val){
                    // 扩大字体大小
                    // val是子组件传递过来的
                    this.fontSize += val;
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

4.3 非父子组件间传值（兄弟之间的数据交互）

单独的事件中心管理组件间的通信
兄弟组件之间不能直接交互数据，而是必须通过事件中心来通信。

在这里插入图片描述
如何实现事件中心：单独 new 一个事件对象，它就扮演事件中心的作用，可以直接进行事件的监听和销毁。

在这里插入图片描述

监听事件与销毁事件

在这里插入图片描述
3. 触发事件

在这里插入图片描述
id：携带的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>父组件</div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
        <script src="./js/vue.js"></script>
        <script>
            // 兄弟组件之间数据传递
            // 提供事件中心
            var hub = new Vue();

            // 子组件1
            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) => {
                        // val 是兄弟组件传递过来的
                        this.num += val;
                    })
                }
            });

            // 子组件2
            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) => {
                        // val 是兄弟组件传递过来的
                        this.num += val;
                    })
                }
            });

            var vm = new Vue({
                el: '#app',
                data: {

                }
            });
        </script>
    </div>
</body>
</html>

在这里插入图片描述
点击第一个按钮会使得 jerry 后面的数字加2，点击第二个按钮会使得tom 后面的数字加1。

销毁事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>父组件</div>
        <div>
            <button @click='handle'>销毁事件</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
        <script src="./js/vue.js"></script>
        <script>
            // 兄弟组件之间数据传递
            // 提供事件中心
            var hub = new Vue();

            // 子组件1
            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) => {
                        // val 是兄弟组件传递过来的
                        this.num += val;
                    })
                }
            });

            // 子组件2
            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) => {
                        // val 是兄弟组件传递过来的
                        this.num += val;
                    })
                }
            });

            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods: {
                    handle: function(){
                        // 销毁事件
                        hub.$off('tom-event');
                        hub.$off('jerry-event');
                    }
                }
            });
        </script>
    </div>
</body>
</html>

当点击了下面的两个点击按钮之后再次点击销毁事件按钮，下面两个点击按钮的功能就会失效，因为事件已经销毁了。
在这里插入图片描述
总结：非父子组件之间的数据交互需要通过事件中心来进行

5.组件插槽

5.1 组件插槽的作用

父组件向子组件传递内容

5.2 组件插槽基本用法

插槽位置

在这里插入图片描述
位于子组件的模板中，slot标签，属于vue的api。

插槽内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 使用子组件的时候传递了内容，子组件中指定的slot的默认内容会被覆盖 -->
        <alert-box>有bug发生</alert-box>
        <alert-box>有一个警告</alert-box>
        <!-- 使用子组件的时候没有传递内容，可以在子组件中指定slot的默认内容 -->
        <alert-box></alert-box>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 组件插槽
        Vue.component('alert-box', {
            template: `
                <div>
                    <strong>ERROR:</strong>
                    <slot>默认内容</slot>
                </div>
            `,
        });

        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>  
</body>
</html>

组件插槽的基本用法总结：
首先在子组件中我们需要提供一个位置 slot标签
添加完这个标签之后，在使用这个组件的时候，组件标签中的内容会传递给这个slot，如果不传递内容，slot标签中的可以提供默认的内容。

5.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>
</head>
<body>
    <div id="app">
        <base-layout>
            <p slot='header'>标题信息</p>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <p slot='footer'>底部信息</p>
        </base-layout>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 具名插槽
        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>
</body>
</html>

在这里插入图片描述
也可以写成以下的形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <base-layout>
            <p slot='header'>标题信息</p>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <p slot='footer'>底部信息</p>
        </base-layout>

        <base-layout>
            <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 src="./js/vue.js"></script>
    <script>
        // 具名插槽
        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>
</body>
</html>

在这里插入图片描述
template标签就是临时性的包裹一下中间的内容，并不会渲染到页面。

使用template的场景就是同时把多条文本填充到插槽中

具名插槽的使用总结：
基本使用就是在模板中定义多个插槽，并给插槽命名，还可以有一个默认的插槽（就是不带名字的slot）。在组件使用的过程中，标签中间传递的内容根据插槽的slot属性匹配对应的插槽名称。没有匹配到的就匹配到默认插槽中。

除此之外还有一个稍微复杂一点的用法，在填充内容的时候，如果把这个插槽的名称标注在这个标签中的话，那只能标注一个标签，如果我们希望往这个插槽中填充多个便签的话，我们就需要用到template这个特殊的标签。template这个名字是固定的，属于vue的api，包裹多个标签。名字放到这个template当中，这样最终渲染出来的结果不会有template标签。

5.4 作用域插槽

应用场景：父组件对子组件的内容进行加工处理
插槽定义
插槽内容
实例代码：

<!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>
        .current {
            color: orange;
        }
    </style>
</head>
<body>
    <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 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>
</body>
</html>

在这里插入图片描述

作用域插槽总结
1. 首先需要在子组件的模板中提供一个插槽，slot中间填充我们要显示的数据，并且slot标签当中需要绑定一个属性，这个属性的名字是自定义的，可以用来提供给父组件。这个值就是要操作的数据。
2. 从父组件的角度来说需要填充这个slot，填充的规则就是需要在组件标签的中间提供内容，这个内容是通过一个特殊的标签template来包裹的，并且通过template的一个关键属性slot-scope来得到子组件传递过来的数据，这个数据的名字是自定义的，通过它就可以拿到item，item的名字是v-bind绑定的名字。这个数据得到之后就可以对它进行一些控制了，比如说通过一些特殊的条件来进行判断，并且可以给它包裹一些标签。