Vue 组件介绍及定义

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件 - 介绍及定义

目录

组件

为什么组件化

组件封装

组件注册方式

定义组件

定义规则和特点

定义示例

定义方法和属性

组件内定义数据

全局和局部组件

全局组件

设置子组件

定义局部组件

总结

---

组件

为什么组件化

扩展HTML元素，封装可重用的代码

组件封装

Dom css js都需要封装起来 封装后使用像一个标签

如下图所示：

组件注册方式

定义组件

定义规则和特点

1.命名：js驼峰，html链接符

2.dom片段 没有代码提示 没有高亮显示 - vue单文件组件解决

3.css 只能写成行内 - vue单文件组件解决

4.template 包含一个根节点

5.组件是孤岛，无法直接访问外面组件的状态或者方法 - 间接的组件通信来交流

6.自定义的组件 data 必须是一个函数

7.所有的组件都在一起， 太乱了 - vue单文件组件解决

定义示例

Vue2写法，使用Vue component定义一个全局的导航组件。

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    <navbar></navbar>
</div>
<script>
    // 定义一个全局组件
    Vue.component("navbar", {
        //dom, js, css
        template: `<div style="background:red">
            <button>左</button>
            电影
            <button>右</button>
        </div>`
    })
    let vm = new Vue({
        el:"#box",
        data:{}
    })
</script>

 注意：组件内无法访问外部的方法

效果：

 

定义方法和属性

在组件内定义方法、计算属性；示例如下：

// 定义一个全局组件
Vue.component("navbar", {
    //dom, js, css
    template: `<div style="background:red">
        <button @click="handleLeft">左</button>
        电影
        <button @click="handleRight">右</button>
    </div>`,
    methods: {
        handleLeft() {
            console.log("左")
        },
        handleRight() {
            console.log("右")
        }
    }
})

 

组件内定义数据

在组件内定义数据需要使用函数式。

示例如下：

Vue.component("navbar", {
    //dom, js, css
    template: `<div style="background:red">
        <button @click="handleLeft">左</button>
        电影
        <button @click="handleRight">右</button>
    </div>`,
    methods: {
        handleLeft() {
            console.log("左")
        },
        handleRight() {
            console.log("右")
        }
    },
    data() {
        return {
            
        }
    }
})

 

全局和局部组件

组件定义又分为全局和局部组件。

全局组件

直接使用Vue.component定义全局组件。

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    <quan-navbar></quan-navbar>
</div>
<script>
    Vue.component("quanNavbar", {
        //dom, js, css
        template: `<div style="background:red">
            <button @click="handleLeft">左</button>
            电影-{{myname}}
            <button @click="handleRight">右</button>
        </div>`,
        methods: {
            handleLeft() {
                console.log("左")
            },
            handleRight() {
                console.log("右")
            }
        },
        data() {
            return {
                myname:'张三'
            }
        }
    })
    let vm = new Vue({
        el:"#box",
        data:{}
    })
</script>

设置子组件

在上面的全局组件quan-navbar中定义一个子组件child。

child隶属于quan-navbar组件的子组件。

示例如下：

Vue.component("child", {
    template:`<div style="background:yellow">child</div>`
})
Vue.component("quanNavbar", {
    //dom, js, css
    template: `<div style="background:red">
        <button @click="handleLeft">左</button>
        电影-{{myname}}
        <button @click="handleRight">右</button>
        <child></child>
    </div>`,
    methods: {
        handleLeft() {
            console.log("左")
        },
        handleRight() {
            console.log("右")
        }
    }
})

这种属于全局定义，可以在父组件中使用，也可以在外面使用。

定义局部组件

在父组件定义中，设置组件属性中定义子组件，这是局部组件定义方式。

在quan-navbar组件中使用components定义一个局部子组件。

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    <quan-navbar></quan-navbar>
    <child></child>
</div>
<script>
    Vue.component("child", {
        template:`<div style="background:yellow">标语</div>`
    })
    Vue.component("quanNavbar", {
        //dom, js, css
        template: `<div style="background:red;border:5px solid black">
            <button @click="handleLeft">左</button>
            电影-{{myname}}
            <button @click="handleRight">右</button>
            <child></child>
            <son-child></son-child>
        </div>`,
        methods: {
            handleLeft() {
                console.log("左")
            },
            handleRight() {
                console.log("右")
            }
        },
        data() {
            return {
                myname:'张三'
            }
        },
        components: {
            "sonChild" : {
                template:`<div>child</div>`
            }
        }
    })
    let vm = new Vue({
        el:"#box",
        data:{}
    })
</script>

效果：

类似于定义的全局函数和函数内部的局部函数，

示例如下：

function parent() {
    function child1() {

    }
    child2()
    child1()
}

function child2() {

}
child2()

 

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件 - 介绍及定义