Vue基础复习(4)vue组件化开发

卷心菜007

已于 2022-04-02 00:39:10 修改

阅读量814

点赞数

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2022-03-08 14:32:22 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/123352958

版权

Vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue2.X vue组件化开发

组件vue官方文档：组件注册 — Vue.js

组件就是对局部视图的封装，每个组件包含了：HTML结构 CSS样式 JavaScript行为 (methods行为 data数据)

提高开发效率,增强可维护性,更好的解决软件上的高耦合,低内聚,无重用的三大代码问题.

Angular、React、Vue都是组件化开发的思想。

组件注册分类:全局注册组件、局部注册组件。

1. 全局注册

一般把网页中特殊的公共部分注册为全局组件:轮播图、分页、通用导航栏。

组件名：可使用驼峰式命名或横线分割命名,但DOM中只能使用横线分割方式进行引用组件,推荐使用小写组件名并包含连字符。

全局注册格式:

Vue.component(“自定义组件名”,{

Template:”定义组件模板”, data:function(){ return{ } } })

<body>

    <div id="app">

        <!-- 组件的使用：将组件名称当作标签使用 -->

        <component-a></component-a>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        // 全局注册组件,需要在new Vue()之前，第一个参数component-a自定义组件名，第二个是配置内容

        Vue.component("component-a",{

            //template选项指定当前组件的模板代码HTML,视图模板页面

            template:"<div><h1>头部组件---{{msg}}</h1></div>",

            // data选项在组件中必须是函数，在Vue实例中是个对象

            data(){

                // 数据放到返回值当中，要返回一个对象，必须是个函数将组件中所需的数据放到返回值对象中

                return{

                    msg:'全局组件',

                }

            }

        })

        new Vue({

            el:"#app",

        })

    </script>

</body>

2. 局部注册

非通用部分注册为局部组件

<body>

    <div id="app">

        <component-b></component-b>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        // 组件对象

        const ComponentB = {

            temlate:"<div @click='fn'>{{name}}</div>",

            data(){

                return{

                    name:"局部组件(子组件)",

                }

            },

            // vue实例中其他都可使用，如：methods、computed、watch、data.只有data存在差别,data必

须是函数

            methods:{

                fn(){

                    alert("methods--fn")

                }

            }

        }

        new Vue({

            el:"#app",

            // 局部组件注册

            components:{

                "component-b":ComponentB,

            }

        })

    </script>

</body>

3.多组件开发

<body>

    <!-- <div class="header">

        <h1>头部组件</h1>

    </div>

    <div class="main">

        <ul>

            <li>aaaaa</li>

            <li>bbbbb</li>

            <li>ccccc</li>

        </ul>

    </div>

    <div class="footer">

        <h1>底部组件</h1>

    </div> -->

    <div id="app">

        <app-header></app-header>

        <app-main></app-main>

        <app-footer></app-footer>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script src="./components/header.js"></script>

    <script src="./components/main.js"></script>

    <script src="./components/footer.js"></script>

    <script>

        new Vue({

            el:"#app",

        })

    </script>

</body>

header.js:

Vue.component("app-header", {

    template: `<div class="header">

    <h1>头部组件</h1>

</div>`

})

main.js:

Vue.component("app-main",{

    template:`<div class="main">

    <ul>

        <li>aaaaa</li>

        <li>bbbbb</li>

        <li>ccccc</li>

    </ul>

</div>`

})

footer.js:

(function () {

    const template = ` <div class="footer">

<h1>底部组件</h1>

</div>`

    Vue.component("app-footer", {

        template //template：template

    })

})()

复杂实例：

Vue:组件化开发及组件间通信：

首页组件化文件存储路径：C:\Users\hp\Desktop\vue2.X\vue2\首页组件化

卷心菜007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础复习(4)vue组件化开发

Vue2.X vue组件化开发组件vue官方文档：组件注册 — Vue.js组件就是对局部视图的封装，每个组件包含了：HTML结构 CSS样式 JavaScript行为 (methods行为 data数据)提高开发效率,增强可维护性,更好的解决软件上的高耦合,低内聚,无重用的三大代码问题.Angular、React、Vue都是组件化开发的思想。组件注册分类:全局注册组件、局部注册组件。1. 全局注册一般把网页中特殊的公共部分注册为全局组件:轮播图、分页、通用导航栏。组件名：可
复制链接

扫一扫