vue.js入门（3）——vue.js组件学习and组件间通信

男娘i 2021-09-14 20:46 450阅读 0赞

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。（摘自官网，说的挺好直接抄了）

下一章开始，会封装几个具体的常用组件(alert/model/search)。

关于组件学习的知识点：

1.利用template参数替换自定义标签内容

2.利用props传递数据（父传子）

3.props验证（补充内容）

4.data字段详解

5.用this.$emit传递数据（子传父）

6.单项数据流（补充内容）

7.利用slot分发数据，创建自定义dom

8.作用域问题

1.利用template参数替换自定义标签内容

在学习组件之前，首先需要用Vue.component(tagName, options)方法注册一个全局组件（当然你也可以在Vue实例里的Compnent对象里放组件，个人觉得这个功能有点鸡肋，因为组件本身的意义就是公用的，放到全局里方便使用）。

第一个参数TagName是组件的名称,可以理解为H5新增的自定义标签。（当然你也可以称为声明式标签，因为他的命名一般都是有意义的，如sel-tmp，指的是选项卡）。

第二个参数是选项，跟Vue实例里的参数差不多，具体会一个一个说明，下面的demo里用到了template，是最基本的参数之一，他会替换自定义标签里的内容。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js学习--组件and组件间通信</title>
        <link rel="stylesheet" type="text/css"  href="/static/css/common.css">
        <link rel="stylesheet" type="text/css" href="/static/css/tmp.css">
    </head>
    <body>
    <div id="app">
        <div style="margin: 20px">
            <sel-tmp></sel-tmp>
        </div>
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-1.11.1.js"></script>
    <script>
        //全局注册
        //Vue.component(tagName, options)
        Vue.component('sel-tmp', {
            //模板
            template:
            '<div class="tmp-drag-wrap">'+
            '<div class="tmp-drag-search">' +
            '<input type="text" class="tmp-drag-input" />'+
            '</div>'+
            '<ul class="tmp-drag-ul">' +
                '<li class="tmp-drag-li" >北京</li>'+
                '<li class="tmp-drag-li" >上海</li>'+
                '<li class="tmp-drag-li" >广州</li>'+
            '</ul>'+
            '</div>',
        })
    
        var vm = new Vue({
            delimiters:['${','}'],
            el:"#app",
            data:{
            }
        })
    </script>
    </html>

![20180225151029201][]

可以看到自定义标签整个被替换成了template里的内容，该自定义标签不会存在于dom文档流。

2.利用props传递数据（父传子）

上面的demo里，Vue实例包含了<sel-tmp></sel-tmp>，所以Vue实例相对于模板即为父级，如果父级需要向子级（也就是模板）传递一个数据应该在子级里使用props参数接受数据。下面我将，【北京，上海，广州】作为一个数组，从父级向子级传递。并在子级里用props接收。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js学习--组件and组件间通信</title>
        <link rel="stylesheet" type="text/css"  href="/static/css/common.css">
        <link rel="stylesheet" type="text/css" href="/static/css/tmp.css">
    </head>
    <body>
    <div id="app">
        <div style="margin: 20px">
            <sel-tmp v-bind:receive-list="postList"></sel-tmp>
        </div>
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-1.11.1.js"></script>
    <script>
        //全局注册
        //Vue.component(tagName, options)
        Vue.component('sel-tmp', {
            //利用props接收父级数据
            props:["receiveList"],
            //模板
            template:
            '<div class="tmp-drag-wrap">'+
            '<div class="tmp-drag-search">' +
            '<input type="text" class="tmp-drag-input" />'+
            '</div>'+
            '<ul class="tmp-drag-ul">' +
                '<li class="tmp-drag-li" v-for="item in receiveList" v-text="item"></li>'+
            '</ul>'+
            '</div>',
    
        })
        var vm = new Vue({
            delimiters:['${','}'],
            el:"#app",
            data:{
                postList:["北京","上海","杭州"],
            }
        })
    </script>
    </html>

效果跟1中的相同。关于数据传递，有一个不知是bug还是我不懂的地方：

dom里绑定数据的时候请用烤串命名法 v-bind:receive-list

函数内请用驼峰命名法  props:\["receiveList"\]

3.props验证（补充内容）

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

为什么要有props验证？

可以将props理解为子级提供给父级的一个输入口，如果父级输入的内容有误，比如在输入金额的输入框里，输入了中文，这个时候，子级就应该报错。然而父级并不一定知道子级需要什么内容（很有可能是某程序员负责写某一个组件，另一个程序员在某个模块中加一个这个组件，双方没有说明沟通），所以vue.js提供了props验证来防止这种情况发生。

props:{
                "receiveList":{
                    //type:Number, //验证类型
                    //default:"",//默认值,如年龄可默认为一岁，性别默认为男等
                    //required:true or false,//传参是否必填
                    validator:function(value){
                        console.log(value);//value = 父级传过来的值
                        //return true or false;
                        //比如来验证一下父级传过来的arr.lenght是否大于0,最好先判断传过来的是不是数组
                        return value.length>=4?true:false;
                    }
                }
            },

![20180225155227442][]

事实上，如果传过来的数据有误，vue只会在控制台报错，并不会阻塞程序执行。所以验不验证对不看控制台的人来说是没啥意义的。（暗示某些测试测不出来的bug）

4.data字段详解

上一章对于vue实例里的data字段埋了一个坑，这里来填一下。

首先作为组件，可能会在一个页面多次用到，下面我通过实现一个功能来讲一下data里的坑。

功能：鼠标点击输入框，实现下拉框的显示和隐藏

实现：需要在data里添加一个ifShow字段来控制模板

template:
            '<div class="tmp-drag-wrap">'+
            '<div class="tmp-drag-search">' +
            '<input type="text" class="tmp-drag-input" @click="ifShow=!ifShow" />'+
            '</div>'+
            '<ul class="tmp-drag-ul" v-show="ifShow">' +
                '<li class="tmp-drag-li" v-for="item in receiveList" v-text="item"></li>'+
            '</ul>'+
            '</div>',
            //data需要用函数返回值，避免多个组件公用一个data对象
            data:function(){
                return {
                    ifShow:false,
                }
            },

在vue.component里，data不能是对象的形式，会直接报错。

可以用函数返回值的形式，避免组件间公用同一数据而相互影响。

5.用this.$emit传递数据（子传父）

刚才的组件再划分一下，将输入框和下拉框分开，让下拉框单独出来作为一个组件（纯粹为了方便讲解）

现在，下拉框变成了子级，父级则是由下拉框组件+输入框，要把下拉框的内容传递给父级，使用了实例中的$emit触发自定义事件，并将参数传给父级。看代码注释：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js学习--组件学习</title>
        <link rel="stylesheet" type="text/css"  href="/static/css/common.css">
        <link rel="stylesheet" type="text/css" href="/static/css/tmp.css">
    </head>
    <body>
    <div id="app">
        <div style="margin: 20px">
            <sel-tmp v-bind:name-arr="list"></sel-tmp>
        </div>
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-1.11.1.js"></script>
    <script>
        //全局注册
        Vue.component('sel-tmp', {
            // 声明 props
            props: ['nameArr'],
            template:
            '<div class="tmp-drag-wrap">'+
            '<div class="tmp-drag-search">' +
            '<input type="text" class="tmp-drag-input" @click="ifShow=!ifShow" v-model="content"/>'+
            '</div>'+
            '<ul-tmp :nameArr="nameArr" :ifShow="ifShow" @receive="receiveData"></ul-tmp>'+ //自定义事件触发父级函数
            '</div>',
            data:function(){
                return {
                    ifShow:false,
                    content:"",
                }
            },
            methods:{
                receiveData:function(args){
                    this.content = args; //父级接收自定义函数参数
                }
            }
        })
    
        Vue.component("ul-tmp",{
            props:["nameArr","ifShow"],
            template:
            '<ul class="tmp-drag-ul" v-show="ifShow">' +
                '<li class="tmp-drag-li" v-for="item in nameArr" v-text="item" @click="postData(item)"></li>'+
            '</ul>',
            methods:{
                postData:function(item){
                    this.$emit("receive",item); //子级触发自定义事件，并把想传的参数传出去
                }
            }
        })
    
        var vm = new Vue({
            delimiters:['${','}'],
            el:"#app",
            data:{
                list:["北京","上海","杭州"],
            }
        })
    </script>
    </html>

![20180225162453883][]

如此，完成了子级向父级传递数据。

6.单项数据流（补充内容）

单项数据流是个神马东西？官网里并没有有关于这项东西的说明,我个人也还没完全摸透这块东西。

首先来解释一下这个名词（用自己语言组织一下）

在组件中，利用props父级向子级传递数据后，子级内部对数据进行了处理，如改变数据的某个值，这时候控制台就会报错（又是一个只报错不影响结果的破玩意儿）。

解决方案：在子级作用域中，将接收的值存入私有的data 或者 computed里，就可以操作（他只是不报错而已）。

来说一下我没搞明白的地方，就是已经标出来的“改变数据”四个字。如，我对上面父级传过来的地名数组进行处理，会发生以下两种情况，

methods:{
                postData:function(item){
                    //this.nameArr=["北京","上海","杭州","广州"];//如果这样写，会报错，因为修改了整个数组
                    //this.nameArr.push("广州");//这样写就不会报错，而且能push数据进去
                    this.$emit("receive",item);
                }
            }

两种修改数据的方法都能执行，只是前者会报错，后者不报错，有兴趣的自己试试。

7和8的内容放到下一章讲吧，在研究研究...

[20180225151029201]: /images/20210813/55477e543b8d458eba7df3e313d72d21.png
[20180225155227442]: /images/20210813/7a6f13fb87394775a83f3c785224fb16.png
[20180225162453883]: /images/20210813/ae1c9c0f080d468a8246c4a8ef454a40.png