前端开发系列052-基础篇之数据流和组件通信(Vue)

本文是早期学习Vue整理的一些阶段性总结，内容主要关于Vue框架中组件间通信和数据流。

一、组件中的数据

Vue组件中的数据主要有两种，一种是组件内部提供的 ，一种是组件外部传入的。

组件内部提供的数据 ，在组件注册时候由选项对象中的data函数返回（返回的是一个对象字面量，所有的数据以键值对的方式组织）。

组件外部传入的数据 ，在组件注册的时候由选项对象中的props属性来进行指定，props属性对应的值通常为字符串数组。

所谓组件内部的数据，即组件本身自带的，该组件在任何地方使用不论使用多少次都一定拥有的数据，如窗户这个组件中一定要使用(铝合金)和(高强度)玻璃。

所谓组件外部传入的数据，即在组件具体使用的时候传入的用于对组件本身的数据进行个性化处理和配置的数据,如1楼窗户使用12块玻璃，2楼的窗户是落地窗只有1块玻璃。

二、组件内部的数据

xml 复制代码

    <body>
    <div id="demoID">
        <my-component></my-component>
        <hr>
        <my-component></my-component>
    </div>
    <template id="my_div">
        <div>
            <div>组件内部的数据1 message:{{message}}</div>
            <div>组件内部的数据2 className:{{className}}</div>
            <a :href="srcURL">我是a标签，我的链接地址为:{{srcURL}}</a>
        </div>
    </template>
    <script>
    
        //实例化组件
        Vue.component("my-component",{
            template:"#my_div",
            data:function () {
                return {
                    message:"也许你没留意，也许你不相信！",
                    className:"等风来001",
                    srcURL:"http://www.wendingding.com"
                }
            }
        });
    
        //创建Vue实例并挂载到页面中指定的标签
        new Vue({
            el:"#demoID"
        })
    </script>

上面的代码中我们注册了一个组件（my-component），组件内部拥有两个数据，分别是message和className，在页面中我们两次使用到了该组件，每次使用该组件的时候渲染后的内容都是一样的。需要注意的是，如果是要用组件内的数据来设置模板中标签的属性节点，那么需要通过v-bind指令来进程绑定。

另外，组件内部的数据也可以通过计算属性来进行处理，下面对之前的示例进行简单的调整，模板中a标签内容中的数据我们通过计算属性的方式来进行获取。

html 复制代码

<body>
<div id="demoID">
    <my-component></my-component>
</div>
<template id="my_div">
    <div>
        <div>组件内部的数据1 message:{{message}}</div>
        <div>组件内部的数据2 className:{{className}}</div>
        <a :href="src">我是a标签，我的链接地址为:{{srcURL}}</a>
    </div>
</template>
<script>

    //实例化组件
    Vue.component("my-component",{
        template:"#my_div",
        data:function () {
            return {
                message:"也许你没留意，也许你不相信！",
                className:"等风来001",
                src:"http://www.wendingding.com"
            }
        },
        computed:{
            //通过计算属性的方式来得出a标签中srcURL的值为wendingding.com
            srcURL:function () {
                return this.src.substr(11);
            }
        }
    });

    //创建Vue实例并挂载到页面中指定的标签
    new Vue({
        el:"#demoID"
    })
</script>
</body>

代码运行的结果为：

less 复制代码

组件内部的数据1 message:也许你没留意，也许你不相信！
组件内部的数据2 className:等风来001
我是a标签，我的链接地址为:wendingding.com

三、组件外部传入的数据

我们知道组件其实就是以一定的方式把多个标签和数据组织在一起，以方便代码的复用和管理。这样每次在实现某个特定（相似）功能(UI)的时候就不必总是从头开始，而只需要以"自定义标签"的方式来使用组件就可以了。

假设我们是一个第三方的汽车制造工厂，因为制造一台比亚迪秦和比亚迪宋的生产线基本上是一样的，这个生产线就好比是组件，相当于我们把这个汽车的生产线封装成了组件，每次需要一辆汽车的时候只需要开启对应的生产线生产就可以了。

在这里要知道，因为不同类型的汽车其配置等信息是不一样的，所以需要个性化处理，这部分的数据需要在使用组件的时候具体的传递进去。组件在使用的时候其实也一样，组件中除固定不变的内部数据外，有时候还需要外部传入进行个性化配置。

html 复制代码

<body>
<div id="demoID">
    <my-component msg1="外部消息1" msg2="外部消息2"></my-component>
    <hr>
    <my-component msg1="{key:value}" msg2="[1,2,3]"></my-component>
</div>
<template id="my_div">
    <div>
        <div>组件内部的数据1 message:{{message}}</div>
        <div>组件内部的数据2 className:{{className}}</div>
        <a :href="src">我是a标签，我的链接地址为:{{srcURL}}</a>
        <hr>
        <div>组件外部传入的数据1 msg1:{{msg1}}</div>
        <div>组件外部传入的数据2 msg2:{{msg2}}</div>
        <div>组件外部传入的所有数据为 {{text}}</div>
        <div>组件内部的数据 + 组件外部的数据 {{AllText}}</div>
    </div>
</template>
<script>
    //实例化组件
    Vue.component("my-component",{
        template:"#my_div",
        data:function () {
            return {
                message:"也许你没留意，也许你不相信！",
                className:"等风来001",
                src:"http://www.wendingding.com"
            }
        },
        props:["msg1","msg2"],
        computed:{
            srcURL:function () {
                return this.src.substr(11);
            },
            text:function () {
                return "msg1 :" + this.msg1 + " msg2:" + this.msg2;
            },
            AllText:function () {
                return "外部数据" + this.text + "内部数据" + "message：" + this.message + "className:" +this.className;
            }
        }
    });

    //创建Vue实例并挂载到页面中指定的标签
    new Vue({
        el:"#demoID"
    })
</script>
</body>

代码说明 在上面的代码中msg1和msg2为外部传入组件的数据，在传递数据的时候使用的形式是为自定义标签（组件）设置属性节点，在组件内部处理的时候key渲染的时候会被替换为对应的值。需要注意的是，设置传入数据的时候，接收到的数据类型都是字符串，而在组件中无论是内部的数据还是外部传入的数据都能够以相同的方式使用，在访问的时候需要使用this前缀。这里贴出上面代码执行的结果：

css 复制代码

组件内部的数据1 message:也许你没留意，也许你不相信！
组件内部的数据2 className:等风来001
我是a标签，我的链接地址为:wendingding.com
组件外部传入的数据1 msg1:外部消息1
组件外部传入的数据2 msg2:外部消息2
组件外部传入的所有数据为 msg1 :外部消息1 msg2:外部消息2
组件内部的数据 + 组件外部的数据 外部数据msg1 :外部消息1 msg2:外部消息2内部数据message：也许你没留意，也许你不相信！className:等风来001
----------------------------------------------------------------
组件内部的数据1 message:也许你没留意，也许你不相信！
组件内部的数据2 className:等风来001
我是a标签，我的链接地址为:wendingding.com
组件外部传入的数据1 msg1:{key:value}
组件外部传入的数据2 msg2:[1,2,3]
组件外部传入的所有数据为 msg1 :{key:value} msg2:[1,2,3]
组件内部的数据 + 组件外部的数据 外部数据msg1 :{key:value} msg2:[1,2,3]内部数据message：也许你没留意，也许你不相信！className:等风来001

组件外部传入数据-属性节点的命名规范问题

shell 复制代码

> 向组件传入数据
>❒ 在组件内部的props属性中注明"这些数据"是从组件的外部传入的  
>❒ 使用组件的时候通过设置`"自定义标签"[组件]`的属性节点来传入数据 形式为：key="value"
>❒ 在组件内部通过key来访问对应的值，得到的总是字符串

特别注意 在传入数据的时候需要注意因为HTML本身不区分大小写的关系，所以如果props中注明的数据是驼峰标识的，那么在设置属性节点的时候应该把单词拆分后使用-分隔。举例现在我们在组件中需要接受外部传入的数据名称为"myMessage"，那么应该做对应的调整。

javascript 复制代码

     //Vue组件实例化的部分代码...
    props:["msg1","msg2","myMessage"]
     
     
    //Vue组件中template中使用到指定数据的部分代码
   <div>组件外部传入的数据3 myMessage:{{myMessage}}</div>
    
    //传入数据的部分代码(把myMessage拆分为 my-message)
   <my-component msg1="外部消息1" msg2="外部消息2" my-message="我的-消息"></my-component>

特别说明 如果传递到组件中的数据的值并不是固定不变的，而需要动态绑定，那么在使用组件的时候需要使用v-bind指令。

xml 复制代码

<body>
<div id="demoID">
    <!--msg1的值是固定不变的，传递的是普通的字符串-->
    <!--msg2的值不确定，需要根据Vue实例对象（这里为app）中data属性对象中msg2Text键值对来确定，使用v-bind指令-->
    <!--src的值也不确定，需要根据Vue实例对象（这里为app）中data属性对象中srcT键值对来确定，使用v-bind指令-->
    <!--src的值因为需要作为插值语法和属性的value值来进行设置，因此在a标签中也需要使用v-bind指令来动态绑定-->
    <my-component msg1="msg1:我是msg1" :msg2="msg2Text" :src="srcT"></my-component>
</div>
<template id="templateID">
    <div>
        <div>外部传入数据 {{msg1}}</div>
        <div>外部传入数据 {{msg2}}</div>
        <a :href="src">外部传入数据 {{src}}</a>
    </div>
</template>
<script>
    //实例化组件
    Vue.component("my-component",{
        template:"#templateID",
        
        //外部传入组件的三个数据分别为:msg1 msg2 src
        props:["msg1","msg2","src"]
    });

    //实例化Vue
    var app = new Vue({
        el:"#demoID",
        data:{
            msg2Text:"msg2:我是msg2 （动态绑定）",
            srcT:"http://www.wendingding.com"
        }
    })
</script>
</body>

上述代码的执行情况如下

arduino 复制代码

外部传入数据 msg1:我是msg1
外部传入数据 msg2:我是msg2 （动态绑定）
外部传入数据 http://www.wendingding.com