Vue基础知识(四) : 组件

一 丶组件

(1) 组件的概念 : 组件是Vue中公共的模块,可以在不同页面进行重复利用,提高代码的复用率

(2) 组件的声明 :

组件可以分为 全局组件 和 局部组件

全局组件的声明 : 全局组件声明在Vue实例之前,在所有Vue实例挂载的区域内都能使用

    Vue.component("MyName", {
            template: "<h2>全局组件</h2>",
            data() {
                return {
                    name: "张三"
                }
            },
            methods:{},
            watch :{}
        })

局部组件的声明 : 局部组件只能在该实例所挂载的区域内使用

    const vm = new Vue({
            el: "#app",
            data: {},
            components: {
                "MyComponent": {
                    template: "<p>局部组件</p>",
                    data() {
                        return {
                            name: "李四"
                        }
                    }
                }
            }
        })

这样书写方式会使Vue实例中的代码显得冗余,可以先在实例外面用变量接收,再添加到Vue实例中

    let ZhName = {
            template: "<a :href='info.link'>实例中的局部组件</a>",
            data() {
                return {
                    info: {
                        link: "https://www.baidu.c