Vue基础（六）--组件及组件间的通讯

谁践踏了优雅 2023-06-11 06:29 115阅读 0赞

1.什么是组件

*  扩展HTML元素，封装可重用的代码。
 *  组件是自定义元素（对象）。

2.定义组件的方式

方式1：先创建组件构造器，然后由组件构造器创建组件  
方式2：直接创建组件

示例：

3.组件的分类

*  全局组件
 *  局部组件

示例：

4.引用模板

将组建的内容放到模板<template>中并引用.

示例：

5. 动态组件

使用<component :is=''>组件，也就是多个组件使用同一个挂载点，然后动态的在它们之间切换。  
用法：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<component :is="componentId"></component>

示例：

6. keep-alive组件

用来缓存，避免重新渲染的。

示例：如下，如果不使用keep-alive，每次切换组件，那两个随机数都会重新生成，如果使用keep-alive组件，则可进行缓存，不重新创建。

7.组件间的数据传递

7.1 父子组件

在一个组件内部定义另一个组件，称为父子组件。子组件只能在父组件中使用。  
默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

7.2 组件间数据传递（通信）

(1)子组件访问父组件中的数据

a）在调用子组件时，绑定想要获取的父组件的数据  
b）在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据。  
注：组件中的数据共有三种形式，data、props、computed

示例：

**props**  
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项：

*  type: 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
 *  default: any  
    为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
 *  required: Boolean  
    定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 + prop 没有被传入的，则一个控制台警告将会被抛出。
 *  validator: Function  
    自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。  
    示例：

// 简单语法

Vue.component('props-demo-simple', {
      props: ['size', 'myMessage']
    })
    
    // 对象语法，提供验证
    Vue.component('props-demo-advanced', {
      props: {
        // 检测类型
        height: Number,
        // 检测类型 + 其他验证
        age: {
          type: Number,
          default: 0,
          required: true,
          validator: function (value) {
            return value >= 0
          }
        }
      }
    })

示例：

<!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="../css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div class="mui-content" id="content">
                <my_hello></my_hello>
            </div>
            
            <template id="hello">
                <div>
                    <h4>我是hello父组件</h4>
                    <h4>访问自己的数据：{
       {msg}}、{
       {name}}、{
       {age}}、{
       {user.id}}</h4>
    
                    <hr>
                    <my_world :message="msg" :age="age" :name="name" :user="user"></my_world>
                </div>
            </template>
    
            <template id="world">
                <div>
                    <h5>我是world子组件</h5>
                    <h5>访问父组件中的数据：{
       {message}},{
       {age}},{
       {name}},{
       {user.username}}</h5>
                </div>
            </template>
            <script src="../js/vue.js"></script>
            <script src="../js/mui.min.js"></script>
            <script type="text/javascript">
                mui.init()
                var vm = new Vue({ //根组件
                    el: "#content",
                    components: {
                        'my_hello': { //父组件
                            template: "#hello",
                            data() {
                                return {
                                    msg: 'hello',
                                    name: 'jack',
                                    age: 23,
                                    user: {
                                        id: 2014311951,
                                        username: 'yxc'
                                    }
                                }
                            },
                            components: {
                                'my_world': { //子组件
                                    template: '#world',
                                    // props:['message','age','user']//接收父组件传过来的数据
                                    props: { //也可以是对象,允许配置高级设置,如类型判断,数据校验,设置默认值
                                        message: String,
                                        age: {
                                            type: Number,
                                            default: 18,
                                            validator: function(value) {
                                                return value >= 0;
                                            }
                                        },
                                        name: {
                                            type: String,
                                            required: true,
                                        },
                                        user: {
                                            type: Object,
                                            default: function(){//对象或数组的默认值必须使用函数的属性来返回
                                                return {id: 2014311950,username: 'jack'};
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
            </script>
        </body>
    
    </html>

总结：父组件通过props向下传递数据给子组件

（2）父组件访问子组件中的数据

a）在子组件中使用vm.$emit(事件名,数据)出发一个自定义事件，事件名自定义  
b）父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据

示例：

<!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="../css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div class="mui-content" id="content">
                <my_hello></my_hello>
            </div>
            
            <template id="hello">
                <div>
                    <h4>我是hello父组件</h4>
                    <h4>访问自己的数据：{
       {msg}}、{
       {name}}、{
       {age}}、{
       {user.id}}</h4>
                    <h4>访问子组件中的数据：{
       {h_sex}}，{
       {h_height}}</h4>
                    <hr>
                    <my_world :message="msg" :age="age" :name="name" :user="user" @e-world="getData"></my_world>
                </div>
            </template>
    
            <template id="world">
                <div>
                    <h5>我是world子组件</h5>
                    <h5>访问父组件中的数据：{
       {message}},{
       {age}},{
       {name}},{
       {user.username}}</h5>
    
                    <button @click="sendData()">将子组件中的数据向上发送到父组件</button>
                </div>
            </template>
            <script src="../js/vue.js"></script>
            <script src="../js/mui.min.js"></script>
            <script type="text/javascript">
                mui.init()
                var vm = new Vue({ //根组件
                    el: "#content",
                    components: {
                        'my_hello': { //父组件
                            template: "#hello",
                            methods: {
                                getData(sex, height) {
                                    console.log(sex);
                                    console.log(height);
                                    this.h_sex = sex;
                                    this.h_height = height;
                                }
                            },
                            data() {
                                return {
                                    msg: 'hello',
                                    name: 'jack',
                                    age: 23,
                                    user: {
                                        id: 2014311951,
                                        username: 'yxc'
                                    },
                                    h_sex: '',
                                    h_height: ''
                                }
                            },
                            components: {
                                'my_world': { //子组件
                                    data() {
                                        return {
                                            sex: 'male',
                                            height: 100
                                        }
                                    },
                                    template: '#world',
                                    // props:['message','age','user']//接收父组件传过来的数据
                                    props: { //也可以是对象,允许配置高级设置,如类型判断,数据校验,设置默认值
                                        message: String,
                                        age: {
                                            type: Number,
                                            default: 18,
                                            validator: function(value) {
                                                return value >= 0;
                                            }
                                        },
                                        name: {
                                            type: String,
                                            required: true,
                                        },
                                        user: {
                                            type: Object,
                                            default: function() { //对象或数组的默认值必须使用函数的属性来返回
                                                return {
                                                    id: 2014311950,
                                                    username: 'jack'
                                                };
                                            }
                                        }
                                    },
                                    methods: {
                                        sendData() {
                                            console.log(this); //这个this表示当前子组件实例
                                            this.$emit('e-world', this.sex, this.height); //触发一个自定义事件,发送数据
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
            </script>
        </body>
    
    </html>

总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

8. 单向数据流

props是单向绑定的，当父组件的属性发生改变时，将传到给子组件，但是不会反过来。  
且不允许子组件直接修改父组件中的数据，会报错。  
示例：

解决方式

**方式1**：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据。  
示例：

**方式2**：如果子组件想修改数据并且同步更新到父组件，两个方法：

① 使用 .sync (1.0版本支持，2.0版本中不支持，2.3版本又开始支持)  
需要显示的触发一个更新事件  
示例：

② 可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性（因为对象是引用类型，指向同一个内存空间）,推荐使用。  
示例：

9.非父子组件间的通讯

非父子组件间通讯，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件。  
步骤：  
  
1.创建空的Vue实例  
var Event=new Vue();

2.触发事件  
Event.$emit('事件名',数据);

3.监听事件  
Event.$on('事件名',data=>\{\})