Vue, App与我（四）

Vue, App与我（四）

---

前言:

• Vue的Component是需要Big-man进一步地推敲和合理理解的, 只有深入地了解这门语言才能在书写Vue代码的时候, 脑海里面想法和实现就会结合得更加的清晰与透彻。也就是所谓的”磨刀不费砍材工！”。

---

组件的来源:

• 组件的思想，就如同是一列火车, 比如印度的火车是簇拥在一起的，这样的火车也是可以运行的，但是火车的安全性、快捷性以及方便性是完全没有体现出来的; 反观中华名族的高铁，座位与车厢的安排错落有致(东北话说”那是相当的合理!”), 组件的出现让前端剥离了印度火车的身份转而赋予了火车以中华民族的高铁身份, 方便、简捷、高效、可维护性高以及服务周到等。

---

Export Default:

• 这一次Big-man来介绍一下export default中的内容， 下面先来看一下代码：

import Error from '../../Error.vue'
import Loading from '../../Loading.vue'
export default {
    components : {
        Error,
        Loading
    },
    data() {
        return {
        }
    },
}

• ES6(ECMAScript 2015)中引入的export default;
• 与其说Big-man在这里去深挖export default倒不如去滚一滚进行JavaScript中的ES6属性。但是Big-man不管如何去思考，感觉都没有阮大神的思考来得方便和详细，所以列举了阮大神的Blog——ECMAScript 6 入门，更详细的ES6属性可以在这里理解得很清楚。
• export, import, export default
• export与export default均可用于导出常量、函数、文件、模块等，Big-man可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。
• 对于像Big-man这样书写过vue代码的小伙伴可能都很清楚上面Big-man的分析，无论是.vue文件还是外部引入的utils.js文件其实里面都只有一个export default，有点小伙伴可以就要问了，那如果多写几个会怎么样？，Big-man不回答这个问题的Boolean，有这个问题的小伙伴可以去尝试一下，但是Big-man会在这里提出一个想法，如果是Big-man的话，Big-man去写多个export default的话，还不如不用这种组件化的开发啊，直接把所有代码堆在一起执行就行了，辛辛苦苦去搭建平台写组件化代码干什么了？下面Big-man就对他自己的提问给出了回答。

---

components组件:

• 接下来解析一下components, 要解释清楚vue当中的components相当的不容易，如果要是需要像初中、高中的语文老师说法那样，也就是需要通过通俗易懂的词汇去理解这么深刻的技术（在Big-man他自己看来）确实是有些困境的，废话不多说，Big-man紧紧握住拳头开始了咬文嚼字的书写自己所理解的Vue的components。

---

组件的起源:

• 组件的概念起源于人体的结构：

• 在这里并不是去分析我们人体的结构(这是Big-man的姐姐(Doctor)所擅长的，但并不是Big-man所擅长的)， 而是去分析Vue的结构，组件的分析。

---

器官对于人体，组件对于Vue：

• 组件对于Vue的作用也就相当于器官对于Big-man的重要性一样，它们提供了一种抽象的，让我们可以使用独立可复用的小组件来构建大型应用，就如同Big-man身上的某些器官，独立并且可以复用，来组成像Big-man这样的猿同志，如下图所示：（左边是大型的应用——右边是组成这个应用的模块）, 右边的这张图是不是一个树的结构。
  

• 器官Big-man可以很清楚地知道它们各自的作用，但是组件是什么?以及它的作用是什么？就需要Big-man去滚一滚了。

• Vue的组件可以扩展HTML元素，封装 可重用的HTML代码，Big-man可以将组件看作是自定义的HTML元素。比如现在Big-man所写的Vue文件代码。

<template>
    <div>
        <div class="nav">
            <div class="replyNav">
                <i class="back" v-on:click="goBack()"></i>
                <span class="title">回复</span>
                <i class="publish" v-on:click="publish()">发布</i>
            </div>
        </div>
        <div class="comment">
            <textarea type="text" placeholder="回复盖伦是一种信仰：" name="text"
                ref="commentReply"
                value=""
                id="commentReply"></textarea>
        </div>
    </div>
</template>
<script>
    import Store from '../../store.js'
    import {Toast} from 'mint-ui'
    export default {
        data () {
            return {
                uid: '',
                username: '',
                whoami: 'user/whoami/',
                commentAddUrl: 'comment/add/',
            }
        },
        mounted() {
            if(Store.getAuthUid()) {
                this.$http.get(this.whoami, {}).then((response) => {
                    const ret = JSON.parse(response.data || "[]")
                    if(ret && ret.code === 0) {
                        this.uid = ret.uid
                        this.username = ret.nickname ? ret.nickname : ret.username
                    } else {
                        Toast(ret.msg)
                    }
                })
            } else {
                this.$router.replace('/login')
            }
        },
        methods: {
            goBack: function () {
                this.$router.push('/details/' + this.$route.params.id + '/' + this.$route.params.detailid)
            },
            publish: function() {
                let linkid = this.$route.params.commentid
                let replyCon = this.$refs.commentReply.value
                this.replyData(linkid, replyCon)
            },
            replyData: function(linkid, replyCon) {
                this.$http.post(this.commentAddUrl, { linkid: linkid, comment: replyCon, type: 13}).then((response) => {
                    const ret = JSON.parse(response.data || "[]")
                    if(ret && ret.code === 0) {
                        Toast('回复成功!')
                        this.$router.push('/details/' + this.$route.params.id + '/' + this.$route.params.detailsid)
                    } else {
                        Toast(ret.msg)
                    }
                })
            },
        }
    }
</script>
<style scoped>
/* 头部导航栏 */
.nav { position: relative; z-index: 5030; }
.replyNav { position: fixed; left: 0; right: 0; z-index: 503; height: 0.5rem; line-height: 0.5rem; width: 100%; background: #000000;}
.replyNav .back { display: inline-block; width: 0.2rem; height: 0.2rem; background: url(../../assets/images/forum/community/icon-back.png) center center no-repeat; background-size: contain; margin-top: 0.14rem; margin-left: 0.05rem;}
.replyNav .title { display: inline-block; width: 73%; height: 0.48rem; font-size: 0.2rem; text-align: center; color: #fff; }
.replyNav .publish { display: inline-block; float: right; width: 0.45rem; height: 0.25rem; margin-right: 0.09rem; margin-top: 0.13rem; border: 1px solid #C0C0C0; border-radius: 5px; color: #fff; text-align: center; line-height: 0.26rem; }
/* 回答框 */
.comment { width: 100%; padding-top: 16%; }
.comment textarea { border: none; outline: none; width: 90%; padding: 5%; min-height: 1rem; }
</style>

---

组件的创建和注册：

• 就像Big-man的器官形成一样，组件的创建过程也存在一些步骤，如下图所示：
  

• Vue的组件使用的三个步骤如上图所示：创建组件的构造器，注册组件和使用组件。

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
            <my-component></my-component>
        </div>
    </body>
    <script src="../../js/vue.min.js"></script>
    <script>

        // 1.创建一个组件构造器: 声明构造器名;
        var myComponent = Vue.extend({
            template: '<div>This is Big-man's first component!</div>'
        })

        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
        Vue.component('my-component', myComponent)

        new Vue({
            el: '#app'
        });

    </script>
</html>

• 它的运行结果Big-man也就不在这里展示了，因为还是需要大家进行测试的。
• 从上面的使用用例，相信大家尝试写之后都会发现，其实书写代码的风格和书写HTMl的代码风格很类似。<html></html>后面接上<script></script>

---

理解组件的创建和注册

• 看清楚了组件的创建和注册之后，Big-man需要进一步的理解组件的创建和注册。
• 这里我们也需要几个步骤来理解组件的创建和注册：
  
  • 1、Vue.extend()也是Vue 构造器的扩展 ，调用Vue.extend()创建的是一个组件构造器。
  • 2、Vue.extend() 构建器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
  • 3、使用Vue.component()注册组件时，需要提供2个参数，第一个参数是组件的标签，第2个参数是组件构造器。
  • 4、组件需要挂载到某个Vue实例下，否则它不会生效。

---

特定范围中引用组件:

• 请注意第4点，以下代码在3个地方使用了<my-component>标签，但只有#app1和#app2下的<my-component>标签才起到作用。

<!DOCTYPE html>
<html>
    <body>
        <div id="app1">
            <my-component></my-component>
        </div>

        <div id="app2">
            <my-component></my-component>
        </div>

        <!--该组件不会被渲染-->
        <my-component></my-component>
    </body>
    <script src="../../js/vue.min.js"></script>
    <script>
        var myComponent = Vue.extend({
            template: '<div>This is Big-man's component!</div>'
        })

        Vue.component('my-component', myComponent)

        var app1 = new Vue({
            el: '#app1'
        });

        var app2 = new Vue({
            el: '#app2'
        })
    </script>
</html>

• Big-man是热切的希望小伙伴们去自己动手写来看这个效果。这里就不会放出效果的示意图了。

---

全局注册和局部注册：

• 调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意的Vue示例下就行使用 。如果不需要全局注册，或者说是让组件使用在其他组件内的话，可以用选项对象的components属性实现局部注册。
• 上面的示例代码可以改为局部注册的方式：

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- 3. my-component只能在#app下使用-->
            <my-component></my-component>
        </div>
    </body>
    <script src="../../js/vue.min.js"></script>
    <script>
        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })

        new Vue({
            el: '#app',
            components: {
                // 2. 将myComponent组件注册到Vue实例下
                'my-component' : myComponent
            }
        });
    </script>
</html>

• 由于my-component组件是注册在#app元素对应的Vue实例下的，所以它不能在其它Vue实例下使用。

<div id="app2">
    <!-- 不能使用my-component组件，因为my-component是一个局部组件，它属于#app-->
    <my-component></my-component>
</div>

<script>
    new Vue({
        el: '#app2'
    });
</script>

• 如果Big-man这样去使用的话，浏览求就会毫不客气的给Big-man**爆出一个错误**:
  
  • Vue Warn: Unknown custom element : <my-component> - did 外加 you register the component correctly ? For recursive components, make sure to provide the 'name' option

---

父组件与子组件:

• Big-man可以在组件中定义并使用其他组件，这个引用的关系与Java当中的父类与子类存在异曲同工之妙——构成了父子组件的关系。

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <parent-component>
            </parent-component>
        </div>
    </body>
    <script src="../../js/vue.min.js"></script>
    <script>

        var Child = Vue.extend({
            template: '<p>This is a child component!</p>'
        })

        var Parent = Vue.extend({
            // 在Parent组件内使用<child-component>标签
            template :'<p>This is a Parent component</p><child-component></child-component>',
            components: {
                // 局部注册Child组件，该组件只能在Parent组件内使用
                'child-component': Child
            }
        })

        // 全局注册Parent组件
        Vue.component('parent-component', Parent)

        new Vue({
            el: '#app'
        })

    </script>
</html>

• 以上都是在本地引用Vue之后的代码，如果你是基于nodejs的文件的话，这个就不适合测试了，比如Big-man的实际项目中的代码:

import Error from '../../components/Error.vue'
export default {
    components: {
        Error
    },
}

• 分析父子组件的代码:
  
  • var Child = Vue.extend({})—— 定义一个Child的组件构造器;
  • var Parent = Vue.extend({}) —— 定义一个Parent的组件构造器;
  • components: { 'child-component': Child }, 将Child组件注册到Parent组件, 并将Child组件的标签设置为child-component。
  • template : '<p>This is a Parent component</p><child-component></child-component>', 在Parent组件内以标签的形式使用Child组件。
  • Vue.component('parent-component', Parent) 全局注册Parent组件。
  • 在页面中使用<parent-component>标签渲染Parent组件的内容, 同时Child组件的内容也被渲染出来。

• Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说: 子组件只能在父组件的template中使用。

---

错误的父子组件的使用方式:

1、以子标签的形式在父组件中进行使用:

<div>
    <parent-component>
        <child-component></child-component>
    </parent-component>
</div>

• Big-man在想他自己这样写为什么会无效了？
  
  • 因为当子组件注册到父组件时，Vue.js会编译好父组件的模板，模板的内容已经决定了父组件将要渲染的HTML。

---

2、在父组件标签外使用子组件:

<div id="app">
    <parent-component></parent-component>
    <child-component></child-component>
</div>

• 运行这段代码，浏览器会提示一下错误。

[Vue Warn]: Unknown custom element:
<child-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

• 错误的意思是没有找到这个child-component，也就是说上面那种方式应用代码的时候，会找不到child-component。

---

组件注册语法糖:

• 在以上的操作过程中Big-man存在着这样的想法，为什么vue声明以及创建好一个组件如此麻烦了？有没有什么技术促使它更简单一些了。Big-man能想到，难道尤大神就想不到了吗？所以增加了组件注册语法糖。
• 以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖。

1、使用Vue.component()直接创建和注册组件:

// 全局注册，my-component1是标签名称
Vue.component('my-component1', {
    template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
    el: '#app1'
})

• Vue.component()的第1个参数是标签名称，第二个参数是一个选项对象，使用选项对象的template属性定义组件模板。
• 使用这种方式，Vue在背后会自动地调用Vue.extend()。

2、在选项对象的components属性中实现局部注册:

var vm2 = new Vue({
    el: '#app2',
    components: {
        // 局部注册, my-component2是标签名称
        'my-component2': {
            template: '<div>This is the second component!</div>'
        },
        // 局部注册, my-component3是标签名称
        'my-component3': {
            template: '<div>This is the third component!</div>'
        }
    }
})

---

使用script和template标签:

• 尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。
• 庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

使用<script>标签:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>myComponent</title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>

        <script type="text/x-template" id="myComponent">
            <div>This is a component!</div>
        </script>
    </body>
    <script src="js/vue.js"></script>
    <script>

        Vue.component('my-component',{
            template: '#myComponent'
        })

        new Vue({
            el: '#app'
        })

    </script>
</html>

• template选项现在不再是HTML元素，而是一个id，Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译。比如上面代码中的:

template: '#myComponent' <-> id="myComponent"

• 注意: 使用<script>标签时，type指定为text/x-template, 意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

使用<template>标签:

• 如果使用<template>标签，则不需要指定type属性，请看如下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>myComponent</title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
        <template id="myComponent">
            <div>This is a component!</div>
        </template>
    </body>
    <script src="js/vue.js"></script>
    <script>

        Vue.component('my-component',{
            template: '#myComponent'
        })

        new Vue({
            el: '#app'
        })

    </script>
</html>

• 在理解了组件的创建和注册过程后，Big-man还是建议使用<script>和<template>标签来定义组件的HTML模板。
• 另外，在Vue.js中，可创建.vue后缀的文件，在vue文件中定义组件，这样Big-man和给位小伙伴更能理解组件化的含义。

---

Jackdan9 Thinking