Vue.js组件化开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/zimingyo/article/details/126946628

Vue组件化编程

概述
Vue使用组件的三大步骤
总结

概述

模块：向外提供特定功能的js程序，一般就是一个js
作用：复用js，简化js的编写，提高js运行效率
模块化：当应用中的js都以模块来编写的，称这个为模块化应用

组件定义：实现应用中局部功能代码（html,css,js）和资源（mp3,mp4,zip等）的集合
组件化：当应用中的功能都是多组件的方式编写的，称这个为组件化应用

传统方式编写应用存在的问题：依赖关系混乱，不好维护；代码复用率不高

非单文件组件：一个文件中包含n个组件
单文件组件：一个文件只包含一个组件

Vue使用组件的三大步骤

定义组件

<html>
 <body>
 <script>
   	const people = Vue.extend({
            name:'people',
            template:`
            <div v-show="flag">
                <h2>{{province}}</h2>
                <h2>{{city}}</h2> 
                <button @click="df()">隐藏</button>  
            </div>
            `,
            data(){
                return{
                    province:'hubei',
                    city:'xiaogan',
                    flag:true
                }
            },
            methods:{
                df(){
                 this.flag=!(this.flag)
                }
            }
        })


// =======================================包含关系=====================================================
        const student = Vue.extend({
            name:'student',
            template:`
            <div>
                <h2>{{stname}}</h2>
                <h2>{{dep}}</h2>   
            </div>
            `,
            data(){
                return{
                    stname:'wzm',
                    dep:'jd'
                }
            }
        })

        const school = Vue.extend({
            name:'school',
            template:`
            <div>
                <h2>{{scname}}</h2>
                <h2>{{address}}</h2>
                <student></student>   
            </div>
            `,
            data(){
                return{
                    scname:'cjdx',
                    address:'jz'
                }
            },
            components:{
                student
            }
        })
// =======================================包含关系=====================================================



// ====================================将people和school合并============================================




        const together = Vue.extend({
            name:'together',
            template:`
            <div>
                <people></people>
                <school></school>
            </div>
            `,
            components:{
                people,
                school
            }
        })
  </script>
 </body>
</html>

注册组件

<html>
 <body>

<script>
 ......//定义组件
 new Vue({
            el:'#app',

            //注册组件
            components:{
                // people,
                // school
                together
            }
        })
 </script>
 </body>
</html>

使用组件

<html>
 <body>
  <div id="app">
        <!-- <people></people>
        <school></school> -->

        <together></together>
  </div>
  <script>
  ...... //定义组件
  ......//注册组件
  </script>
 </body>
</html>

非单文件组件

项目结构
在这里插入图片描述
代码内容如上即可

......

单文件组件

文章地址跳转

总结

(1) 定义组件
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别
区别：

el 不要写（最终所有的组件都会经过一个vm管理，由vm中的el决定服务哪个容器）
data必须写成函数（避免组件复用时，数据存在引用关系）
使用template可以配置组件结构

(2) 注册组件
局部注册：靠 new Vue()传入components
全局注册：Vue.component(‘组件名’,‘组件’)
(3) 使用组件（容器中使用）
<组件名></组件名>