07 Vue 组件化开发介绍

396次阅读

共计 2573 个字符，预计需要花费 7 分钟才能阅读完成。

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护
因为组件是资源独立的, 所以组件在系统内部 可复用, 组件和组件之间可以嵌套
如果项目比较复杂, 可以 极大简化代码量, 并且对后期的需求变更和维护也更加友好

07 Vue 组件化开发介绍

组件基础 : https://cn.vuejs.org/v2/guide/components.html

在 vue.js 中我们可以使用 Vue.component(tagName, options) 进行全局注册，例如:

Vue.component('my-component', {// 选项})

可以在一个组件内部使用 components 选项做组件的局部注册，例如 :

components:{
    child1:{
        // 该局部组件标签内容
        template:`
            <div>
            <p> 局部组件内容 </p>
            </div>
            `,
    }

全局组件必须在根组件 (Vue 对象) 的上方定义
定义的组件标签位置必须放在 body 中的根组件管理的 div 标签内部
局部组件必须在所属父组件 (全局组件或者根组件) 的内部使用, 不能独立使用, 不能到别的父组件中使用(谁是父组件就在谁里面用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>

<div id="app">
    <button @click="root1" class="btn btn-success"> 根组件按钮 </button>
    <br>
    <child2></child2>
    <hr>
    <myhead></myhead>
    <hr>
</div>
</body>
<script>
    // 🔰全局组件, 必须写在根组件的前面, 标签名 "myhead", 不能与 head 之类的重名
    Vue.component('myhead', {
        // 该组件的标签内容
        template: `
            <div>
                <button @click="handleClick" class="btn btn-info"> 全局组件按钮 1 </button>
                <br>
                <child1></child1>
            </div>
        `,
        // 该组件触发的函数
        methods: {handleClick() {alert('我是全局组件按钮')
            }
        },
        // 🔰全局组件内的局部组件, 在哪里定义的就只能在哪里使用, 局部组件名 "child1"
        components:{
            child1:{
                // 该局部组件标签内容
                template:`
                <div>
                    <button @click="handleClick" class="btn btn-info"> 全局下的局部组件按钮:{{isShow?'隐藏':'展示'}}</button>
                    <p v-show="isShow"> 路门月照开烟树🌙忽到庞公栖隐处 </p>
                </div>
                `,
                // 该组件使用的 js 变量, 必须要 return 一个对象
                data(){
                    return{isShow: true,}
                },
                // 局部组件的函数
                methods:{handleClick(){this.isShow = !this.isShow}
                }
            }
        }
    })

    // 🔰根组件, 必须写在全局组件的后面
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {root1() {alert('我是根 div 的按钮!')
            }
        },
        // 🔰根组件内的局部组件, 只能在根组件内使用(哪里定义的哪里使用), 组件名 "child2"
        components:{
            child2:{
                // 组件标签内容
                template:`
                <div>
                    <button @click="handleClick" class="btn btn-success"> 根下的局部组件按钮:{{isShow?'隐藏':'展示'}}</button>
                    <p v-show="isShow"> 人面不知何处去🌙桃花依旧笑春风 </p>
                </div>
                `,
                // 局部组件的 js 变量, 必须 return 对象
                data(){
                    return{isShow: true,}
                },
                // 局部组件使用的函数
                methods:{handleClick(){this.isShow = !this.isShow}
                }
            }
        }
    })
</script>
</html>

07 Vue 组件化开发介绍

自定义组件需要有一个 root element, 一般包裹在一个 div 中
父子组件的 data 数据是不共享的, 就算属性名相同也是相互隔离的(后面介绍组件间通信)
组件可以有 data、methods、computed..., 但是 data 必须是一个函数 :

// Vue 实例中 data 是个键值对, 用来存放属性 : 
var vm = new Vue({
    el: '#box',
    data: {isShow: true}
})

// 组件中的 data 也是一个函数, 但必须有一个返回值 return
Vue.component('myhead', {
        // 该组件的标签内容
        template: `
            <div>
                <button @click="handleClick" class="btn btn-info"> 全局组件按钮 1 </button>
            </div>
        `,
        // 该组件触发的函数
        methods: {handleClick() {alert('我是全局组件按钮')
            }
        },
        // 该组件内数据
        data: {
            return {name: 'hi'}
        }
})

正文完