【前端Vue】04 - 组件开发 [v-model + 父子组件通信]

1. 表单绑定 v-model

1. 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

2. Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。

1.1 案例分析

vue中v-model的双向绑定

1. 当我们在输入框输入内容时。

2. 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。

3. 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。

4. 所以，通过 v-model 实现了双向的绑定。

  
  
  
{{message}}

    const app = new Vue({
        el: '#app',
        data: {
            message: ''
        },
        methods: {}
    });

1.2 v-model 原理

1. v-model 指令就是 v-click:input 和 v-bind:value 指令的结合，再使用 $event中 target 获取到当前输入框中输入的值。

  
  
  
  
{{message}}

const app = new Vue({
        el: '#app',
        data: {
            message: '您好啊!'
        },
        methods: {
            valueChange(event) {
                this.message = event.target.value;
            }
        }
    });

1.3 v-model 结合 radio 类型

1. 单选框的实现需要多个input使用相同的name属性。

  
    男
  
  
    女
  

const app = new Vue({
        el: '#app',
        data: {
            sex: 1
        }
    });

1.4 v-model 结合CheckBox

  篮球
  羽毛球
  毽子
  足球
  
{{hobbies}}

    const app = new Vue({
        el: '#app',
        data: {
            hobbies: []
        }
    });

1.5 v-model 结合select

1. select可以实现单选和多选 。使用 multiple 属性。

  
  
    苹果
    香蕉
    芒果
    李子
  

  
{{fruit}}
  

  

  

  
  
    苹果
    香蕉
    芒果
    李子
  
  
{{fruits}}

const app = new Vue({
        el: '#app',
        data: {
            fruit: '香蕉',
            fruits: []
        }
    });

1.6 v-model 的值绑定

1. 所谓的值绑定就是将数据动态的绑定到每一个操作项上。

  
    {{hobby}}
  
  
您的爱好是 : {{selected}}

const app = new Vue({
        el: '#app',
        data: {
            hobbies: ['篮球', '足球', '羽毛球', '乒乓球', '高尔夫球'],
            selected: []
        }
    });

1.7 v-model 修饰符的使用

1. lazy: 可以让双向绑定的元素，减少实时渲染次数，只有当鼠标失去焦点或者当用户按下回车的时候才渲染。

2. number：可以将绑定的数据的数据类型转换为 number 类型，方便一些需要使用数字的地方。

3. trim: 去除字符串两边的空格。

  
  
  
您输入的用户名是 : {{username}}
  
  
  
 文本框的类型 : {{typeof phoneNum}} 
  
  
  
{{content}}

    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            phoneNum: 0,
            content: ''
        }
    });

2. 组件化

1. 组件化是Vue.js 中的重要思想,它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。

Vue组件树

2.1 注册组件的基本步骤

1. 创建组件构造器;

2. 注册组件;

3. 使用组件。

注册组件的基本步骤

创建组件的基本步骤

// 1. 创建组件构造器 使用Vue.extend 创建组件构造器
    const cpnC = Vue.extend({
        template: `
                

                  
我是标题
                  
我是段落一
                  
我是段落二
                
              `
    });
    // 2. 注册组件
    Vue.component('cpn', cpnC);
    // 3. 挂载 app
    const app = new Vue({
        el: '#app',
        data: {}
    });

2.2 全局组件和局部组件

1. 全局组件是使用 Vue.component('组件名称' , 组件构造器) 注册的组件；

2. 局部组件时在 ， Vue({}) 对象中使用 components属性声明的组件。

    /**
     * 全局组件可以在多个Vue的实例下面使用
     */
        // 1. 使用Vue.extend 创建一个组件构造器
    const cpnC = Vue.extend({
            template: `
                  

                    
我是标题
                    
我是段落1
                    
我是段落2
                  
>
                 `
        });


    /**
     * 局部组件构造器声明
     */
    const cpnCa = Vue.extend({
        template: `
                  

                    
我是局部组件的标题
                    
我是段落1
                    
我是段落2
                  
>
                 `
    });

    // 2. 将组件注册为全局组件
    Vue.component('cpn', cpnC);

    const app = new Vue({
        el: '#app',
        data: {},
        components: {
            cpna: cpnCa
        }
    });

    const app2 = new Vue({
        el: '#app2',
        data: {},
        components: {}
    });

全局组件和局部组件

2.3 父组件和子组件

1. 组件和组件之间存在层级关系,而其中一种非常重要的关系就是父子组件的关系。

父组件和子组件的关系

2.4 注册组件的语法糖简写

注册组件的语法糖写法

/**
     *  （一） 传统方式注册组件
     */
        // 1. 创建组件构造器
    const cpnC1 = Vue.extend({
            template: `
        

          
我是全局组件一
        
       `
        });

    /**
   * 注册一个全局组件
   * */
    Vue.component('cpn1', cpnC1);

    /**
     * （二） 使用语法糖的方式注册组件 : 主要是省去调用Vue.extend的步骤，而是可以直接使用一个对象来代替
     */
    Vue.component('cpn2', {
        template: `
        

          
我是全局组件二（使用语法糖方式创建）
        
       `
    });

    /**
     * 创建一个组件构造器用于局部组件
     */
    const cpnC4 = Vue.extend({
        template: `
        

          
我是局部组件四
        
       `
    });

    /**
     * 挂载app
     */
    const app = new Vue({
        el: '#app',
        data: {},
        components: {
            /* 创建局部组件 */
            cpn3: {
                template: `
        

          
我是局部组件三（使用语法糖方式创建）
        
       `
            },

            cpn4: cpnC4
        }
    });

    /**
     * 挂载app2
     */
    const app2 = new Vue({
        el: '#app2',
        data: {}
    });

2.5 组件模板抽离

1. 在编写组件模板的时候可以使用，script 或者 template标签定义标签模板。将其从对象中抽离出来。

组件模板抽离

Vue.component('cpn', {
        template: '#cpn'
    });

    Vue.component('cpn1', {
        template: '#cpn1'
    });

    const app = new Vue({
        el: '#app',
        data: {}
    });

2.6 组件中可以访问Vue实例中的数据吗？

1. 组件是一个单独功能模块的封装：这个模块有属于自己的HTML模板，也应该有属性自己的数据data。

2. 答案：不能。而且即使可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变的非常臃肿。

3. 结论：Vue组件应该有自己保存数据的地方。

2.7 组件自己的数据存放在哪里呢?

1. 组件对象也有一个data属性(也可以有methods等属性)。

2. 只是这个data属性必须是一个函数。而且这个函数返回一个对象，对象内部保存着数据。

/**
     * 语法糖方式注册组件
     */
    Vue.component('cpn', {
        template: '#cpn',
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            increment() {
                this.counter++
            },
            decrement() {
                this.counter--
            }
        }
    });

    /**
     * 使用语法糖方式注册组件
     */
    Vue.component('com', {
        template: '#com',
        data() {
            return {
                title: '我是标题'
            };
        }
    });

    const app = new Vue({
        el: '#app',
        data: {}
    });

2.8 为什么组件中的data是一个函数

1. 如果不同组件他们共享一个共同的对象将会出大问题。

    const obj = {
        name: '张三',
        age: 23
    }

    /**
     * 每次调用函数返回一个对象
     */
    function data() {
        return obj;
    }

    let obj1 = data();
    obj1.name = '李四';
    let obj2 = data();
    console.log(obj1); // {name: "李四", age: 23}
    console.log(obj2); // {name: "李四", age: 23}

为什么组件中的data是一个函数

2.9 父子组件之间的通信

1. 在开发中，往往一些数据确实需要从上层传递到下层，比如在一个页面中，我们从服务器请求到了很多的数据。其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢？Vue官方提到

1. 父组件向子组件传递数据 : 通过props向子组件传递数据。

2. 子组件向父组件传递数据： 通过事件向父组件发送消息。

Vue父子组件之间的通信

props 的基本用法

1. 在组件中，使用选项props 来声明需要从父级接收到的数据。props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

我们先来看一个最简单的props传递：

简单的props传递

在下面的代码中，我直接将Vue实例当做父组件，并且其中包含子组件来简化代码。

1. 真实的开发中，Vue 实例和子组件的通信和父组件和子组件的通信过程是一样的。

实现父组件向子组件传递数据的步骤如下 :(使用字符串数组的方式)

1. 第一步: 在子组件将props定义为一个字符串数组用于接收父组件传递的数据。

2. 第二步:将父组件的值和子组件定义的属性进行绑定。

3. 第三步:值已经传递过来了，在子组件中使用父组件的数据。

父组件向子组件传递数据

 /* 父传子通过 props */
  const cpn = {
    template:'#cpn',
    data() {
        return{

      }
    },
    // 字符串数组写法
    // 第一步
    props:['cmovies','cmessage']
  }
    const app = new Vue({
        el: '#app',
        data: {
            message:'我是父组件的message',
      movies:['陆小凤传奇之决战紫禁之巅','陆小凤传奇之剑神一笑','陆小凤传奇之凤舞九天']
    },
        components: {
            /* 使用属性的增强写法 */
            cpn
        }
    });

实现父组件向子组件传递数据的步骤如下 :(使用对象的方式)

1. props除了使用数组的方式之外还能使用对象的方式接收父组件传递的数据。当需要对props进行类型验证的时候，就需要使用对象的写法。

2. 对象中属性非自定义的数据类型可以使用 type属性验证该属性的数据类型，使用required标识该属性是否为必须传递的，使用default属性设置默认值。

props中的属性

验证都支持如下类型:

1. String；

2. Number；

3. Boolean；

4. Array:当是数组类型的时候，在设置默认值时需要注意，在某些版本之后不能使用 default:[]这样的默认值，而是需要一个函数，在函数中返回数组的默认值 ,如 : default:() => { return []; } 或 default:() => [] 或者 default() {return [];}；

5. Object；

6. Date；

7. Function；

8. Symbol；

9. 当我们有自定义构造函数时，验证也支持自定义的类型。

peops为对象类型

父组件传递值给子组件props属性驼峰标识

1. 在进行父组件传递数据给子组件的时候，在props中的属性如果使用了驼峰标识，那么在子组件标签中使用该属性的时候就需要使用 横线分隔的形式，绑定父组件传递的数据。

子组件中props的属性使用驼峰标识

2.10 子组件向父组件传递数据

子组件向父组件传递数据的步骤

1. 第一步 : 定义一个,比如按钮事件 将子组件的数据传递给父组件。

    
    {{item.name}}

2. 第二步 : 将子组件的自定义事件发射给父组件 并传递携带的参数。

  btnClick(item) {
                /* 第二步 : 将子组件的自定义事件发射给父组件 并传递携带的参数 */
                this.$emit('customevent', item);
            }

3. 第三步 : 在父组件中处理子组件自定义的事件。

4. 第四步 : 处理触发子组件自定义事件之后需要执行的方法。

  /* 第四步 : 处理触发子组件自定义事件之后需要执行的方法 */
            getSonCpnData(item) {
                console.log(item);
            }

子组件向父组件传递数据

const cpn = {
        template: '#cpn',
        data() {
            return {
                categories: [
                    {id: 1, name: '手机数码'},
                    {id: 2, name: '家用电器'},
                    {id: 3, name: '电脑办公'},
                    {id: 4, name: '生鲜蔬菜'}
                ]
            }
        },
        methods: {
            btnClick(item) {
                /* 第二步 : 将子组件的自定义事件发射给父组件 并传递携带的参数 */
                this.$emit('customevent', item);
            }
        }
    };

    /* 子组件产生了一些事件希望父组件知道 */
    const app = new Vue({
        el: '#app',
        components: {
            cpn
        },
        methods: {
            /* 第四步 : 处理触发子组件自定义事件之后需要执行的方法 */
            getSonCpnData(item) {
                console.log(item);
            }
        }
    });

2.11 父子组件通信-结合双向绑定

1. 需求1: 当子组件中的 data 数据 dNumber1 dNumber2 改变的时候 子组件 props 中的 number1 number2 也需要发生改变，利用的是 v-model的原理 是由 v-on:input 和 v-bind:value 组合。

2. 需求2: 当number1 的值改变的时候 将 number2 的值变为 number1 的 100 倍。

Vue父子组件通信

简单图解

const app = new Vue({
        el: '#app',
        data: {
            num1: 0,
            num2: 0
        },
        methods: {
            num1change(value) {
                this.num1 = parseFloat(value);
            },
            num2change(value) {
                this.num2 = parseFloat(value);
            }
        },
        components: {
            'cpn': {
                template: '#cpn',
                props: {
                    /* 这里的值有父组件的 num1 或 num2 决定 */
                    number1: Number,
                    number2: Number
                },
                data() {
                    return {
                        dNumber1: this.number1,
                        dNumber2: this.number2
                    };
                },
                methods: {
                    dnumber1change(event) {
                        // 从event中获取当前改变的值
                        this.dNumber1 = event.target.value;
                        // 发送一个自定义事件给父组件让父组件的值发生改变
                        this.$emit('num1change', this.dNumber1);
                        this.dNumber2 = this.dNumber1 * 100;
                        this.$emit('num2change', this.dNumber2);
                    },
                    dnumber2change(event) {
                        this.dNumber2 = event.target.value;
                        this.$emit('num2change', this.dNumber2);
                        this.dNumber1 = this.dNumber2 / 100;
                        this.$emit('num1change', this.dNumber1);
                    }
                }
            }
        }
    });

2.12 父子组件通信-结合双向绑定 (watch实现)

const app = new Vue({
        el: '#app',
        data: {
            number: 123
        },
        watch: {
            number(newValue, oldValue) {
                console.log('number从' + oldValue + '变为了' + newValue);
            }
        }
    });

2.13 父组件直接访问子组件使用 $children 和 $refs

父组件访问子组件

1. $children 获取到的是父组件中的所有子组件，結果是一个数组。包含所有子组件对象。$children的缺陷：通过$children 访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。

父组件通过this.$children获取到子组件对象

2. $refs 获取到的是一个类似Map集合的对象。但是使用$refs获取之前需要在组件标签上使用ref属性指定。$refs和ref 指令通常是一起使用的。首先，我们通过ref给某一个子组件绑定一个特定的ID。其次，通过this.$refs.ID就可以访问到该组件了。

父组件通过this.$refs获取子组件的对象

  
  
  点我

/* $children 可以拿到所有的子组件 */
    /* $refs 拿到指定 ref 的组件 */
    const app = new Vue({
        el: '#app',
        data: {},
        methods: {
            btnClick() {
                // console.log(this.$children);
                // console.log(this.$children[0].message);
                // this.$children[0].showMessage();
                console.log(this.$refs);
                console.log(typeof this.$refs);
                // let map = new Map();
                // map.set('aaa', {name: '张三'});
                // console.log(map);
                console.log(this.$refs.aaa.message);
                this.$refs.bbb.showMessage();
            }
        },
        components: {
            'cpn':
                {
                    template: '#cpn',
                    data() {
                        return {
                            message: '我是子组件'
                        }
                    },
                    methods: {
                        showMessage() {
                            console.log(this.message);
                        }
                    }
                }
        }
    });

2.14 子组件中访问父组件 $parent 和 $root

1. $parent : 可以获取组件的父组件。

2. $root : 访问的是根组件，Vue实例。

子组件访问父组件

const app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            'cpn': {
                template: '#cpn',
                data() {
                    return {}
                },
                methods: {
                    btnClick() {
                        console.log(this.$parent); //
                    }
                },
                components: {
                    'ccpn': {
                        template: '#ccpn',
                        methods: {
                            btnCcpnClick() {
                                console.log(this.$parent); // 获取的是其父组件对象
                                console.log(this.$root); // 获取的是根组件对象
                            }
                        }
                    }
                }
            }
        }
    });

子组件通过$parent访问父组件注意事项

1. 尽管在Vue开发中，我们允许通过$parent 来访问父组件，但是在真实开发中尽量不要这样做。

2. 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。

3. 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。

4. 另外，更不好做的是通过$parent 直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。