前言

在一些商业级前端项目中，ui和业务逻辑往往特别复杂，所以我们往往会将一个复杂页面拆分成多个“组件”，每个组件管理各自的业务逻辑，本章内容将通过对上一章ToDoList小工具的组件化改造，从而对Vue的组件化有一个初步的认识

确定需要拆分的组件

这是我们上一张ToDoList小工具的代码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="onSubmitClick">提交</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            onSubmitClick: function () {
                this.list.push(this.inputValue)
                this.inputValue = ""
            }
        }
    })

</script>
</body>
</html>

运行后如下所示

这里，我们可以尝试对list进行组件化拆分，做成一个可复用的组件

进行组件化改造（全局组件）

直接上代码，这里我们定义了一个全局组件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="onSubmitClick">提交</button>
    <todo-item v-bind:content="item"
               v-for="item in list">
    </todo-item>
</div>

<script>
    Vue.component('TodoItem', {
        props: ['content'],
        template: '<li>{{content}}</li>>'
    })
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            onSubmitClick: function () {
                this.list.push(this.inputValue)
                this.inputValue = ""
            }
        }
    })

</script>
</body>
</html>

代码分析：

使用Vue.component('TodoItem',{})声明一个组件，使用驼峰法命名，Vue会自动帮我们创建<todo-item/>组件，可以直接在html中使用
组件中需要用到的数据需要外部传入，使用v-bind传入数据，可以传入多组数据，但需要使用不同的命名

<todo-item v-bind:content="item"
                     v-bind:content1="item"
                     v-bind:content2="item"
           v-for="item in list">
</todo-item>

使用props接收外部传入的数据，命名要与外部传入的一致，同样可以接收多组数据

props: ['content','content1','content2'],

使用template接收模板代码

局部组件

上面我们定义的是一个全局组件，那么我们如何来定义一个局部组件呢？

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button v-on:click="onSubmitClick">提交</button>
    <todo-item v-bind:content="item"
               v-for="item in list">
    </todo-item>
</div>

<script>
    var TodoItem = {
        props: ['content','content1','content2'],
        template: '<li>{{content}}</li>>'
    }
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            onSubmitClick: function () {
                this.list.push(this.inputValue)
                this.inputValue = ""
            }
        }
    })

</script>
</body>
</html>

我们使用var TodoItem = {)来声明一个局部组件，运行代码，结果报错了

也就是说我们的组件没有被注册，局部组件需要在Vue实例中使用components字段进行注册

    var app = new Vue({
        el: '#app',
        components: {
          TodoItem: TodoItem
        },
                //其他不变的代码省略
        .....
    })

总结

其实不管是全局组件还是局部组件，Vue的底层都会把组件编译成一个Vue的实例，我们可以说一个Vue项目是由很多组件组成的，也可以说是由很多Vue实例组成的。本章主要是带大家简单的入门一下组件的概念，学习一下如何创建全局组件和局部组件，后续章节中还会进行更加深入的进行组件化实战

最后编辑于：2020.04.25 16:46:01

从零开始学Vue.js（三）组件化初探

目录

前言

确定需要拆分的组件

进行组件化改造（全局组件）

局部组件

总结