🍖Vue 组件化开发介绍

一.什么叫组件化

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

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

二.组件注册的两种方式

1.全局组件

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

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

2.局部组件

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

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

三.定义全局组件与局部组件

1.注意事项

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

2.示例

    <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>



<div id="app">
    <button @click="root1" class="btn btn-success">根组件按钮</button>
    <br>
    <child2></child2>
    <hr>
    <myhead></myhead>
    <hr>
</div>

<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>

3.效果展示

四.自定义组件注意事项

• 自定义组件需要有一个 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'
            }
        }
})