Vue学习之组件机制

Vue学习之组件机制

---

一、组件基础

组件是可复用的Vue实例，和Vue接受相同的选项，都有一系列相同的属性和方法，但也有一些区别

1.定义组件

组件和Vue实例的结构基本相同，有区别的地方是组件中的data是一个函数，函数返回的对象中存的才是数据。

组件还需要template属性，在里面写html代码片段，这里的代码片段在使用的时候会显示在页面上。

 let myCom = {
      data() {
        return {
          comMsg: "组件数据"
        }
      },
      template: `
      <div>
        <span>{{comMsg}}</span>
        <span>{{comMsg}}</span>    
      </div>
      `
    };

2.组件注册

在定义了组件之后，要使用组件还需要注册组件，注册组件有两种方式：全局注册和局部注册。

Ⅰ.全局注册

全局注册也就是在整个html文件中注册组件，注册完后，在任何新建的Vue实例中都可以使用这个组件。

Vue.component('my-com', myCom);

这里的第一个参数给组件取的名字，第二参数是组件对象。

Ⅱ.局部注册

全局注册往往是不太理想，因为即时你没有用到这个组件，他仍然会被包含在你最终的构建结果里，这时就需要全局注册。
局部注册是在一个Vue实例或者另一个组件中注册，注册之后，只有在注册的环境内能够使用。

new Vue({
            el: '#app',
            // 局部注册A组件
            components: {
                'my-com-a': myComA
            },
            data: {},
            methods: {},
        })

在父组件中使用components注册组件，可以注册多个组件。

二、组件通信

在使用组件时，我们往往会使用多个组件，这就涉及到组件之间数据的交互。
如果组件之间没有数据的交互，每个组件就只能使用自己的data中的数据。
为了实现数据的通信，通常有两种方向的数据流动：prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发 送消息。

1.props传值。

props是父组件给子组件传值的方法。
父组件通过属性绑定的方式将参数传递给子组件，子组件通过props声明期望从父组件那里获取 的参数。

Ⅰ.父组件传递数据给子组件

<my-com  :msg="msg" attr-a="A"></my-com>

这里的 msg 和 attr-a都是传递的数据。
如果在前面加了冒号，则表示变量名，这样可以传递data中的变量以及引用数据类型。如果只是传递一个固定字符串，则不需要引号。

Ⅱ.子组件接受父组件的数据

let myA = {    
             props: ["msg", "attr-a"],
             data() {
                return {
                }
            },
            template: `
            <div>
    			{{attr-a}}
                {{msg}}
            </div>
            `
        }

这里通过props来按顺序接受数据。

props如果是一个数组，则表示直接接受并接受任意数据类型。

props还可以指定接受的数据类型，以及对数据进行过滤。

指定类型和一些其他操作：

props: {
				//指定msg为String类型
                msg: String,
                //指定类型和返回默认值
                stus: {
                    type: Array
                    default() {
                        return [6, 7, 8]
                    }
                },
                //表示isActive可以为String或者Boolean
                isActive: [String, Boolean],
                //必填项
                name: {
                    type: String,
                    //require为true时，代表必填
                    required: true,
                    default: 'lisi'
                },
                //自定义校验规则
                age: {
                    type: Number,
                    //校验器
                    validator(value) {
                        return value > 50;
                    }
                }

            },

值得一提的是，如果父组件给子组件的数据不是子组件的数据，那么在运行html代码时，控制台会报错，但并不影响显示，这个的报错相当于是一个提示，并不影响代码的执行。

2.事件传值

实际上，Vue的数据流动是单向的，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更 父级组件的状态，从而导致你的应用的数据流向难以理解。

因此，父组件只能通过自定义事件来获取子组件的数据。
父组件

<div id='app'>       
        {{msg}}
        {{sonMsg}}
        <my-com @my-event="myEventHandle">
        </my-com>

    </div>

@my-event="myEventHandle"是一个自定义事件，需要在父组件中声明一个处理函数

new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                sonMsg: 'sss',
            },
            methods: {
                //my-event的事件处理程序
                myEventHandle(a, b) {
                    console.log(a, b, '---------');
                    this.sonMsg = a;
                }
            },
        });

 let myCom = {
            data() {
                return {
                    comMsg: "子组件数据"
                }
            },
            template: `
      <div>
        <span>子组件内部数据：{{comMsg}}</span>
        <button @click="toEmit">发射数据</button>
      </div>
      `,
            methods: {
                toEmit() {
                    //发射  参数:自定义事件名称,事件参数(发射的数据)
                    this.$emit('my-event', this.comMsg)
                }
            }
        };

这里子组件中通过$emit发射了一个自定义事件my-event，传递了子组件中的comMsg。父组件通过myEventHandle 函数接受子组件传来的值并赋给sonMsg实现子组件到父组件的数据传递

总结

对学习Vue中的组件，组件注册，组件通信进行了整理