冇事来学系--Vue2.0 组件开发详讲(上)

简介: 组件化开发根据封装的思想,把页面上可重复用的UI结构封装为组件,从而方便项目的开发和维护组件-->实现应用中局部功能代码和资源的集合

组件化开发


根据封装的思想,把页面上可重复用的UI结构封装为组件,从而方便项目的开发和维护

组件-->实现应用中局部功能代码资源的集合

vue支持组件化开发,组件的后缀名是.vue。每个.vue组件都由3部分构成:


1.  template-->组件的模板结构 (DOM标签)

template标签只起到包裹的作用,不会被渲染成真实的元素

<template>
  <div class="test-box">
    <h3>这是用户自定义的组件</h3>
    <div>用户名:{{ username }}</div>
    <button @click="changeName">修改用户名</button>
  </div>
</template>


注意:在template标签中,只允许存在一个根元素(所以template里面要加一个div作为根元素包裹其他元素)


2.  script--> 组件的JavaScript行为

// 注意:在组件中,script标签内必须写 默认导出 的语法(固定格式,一定要写)
// export default {}  
export default {
  // 注意:组件中的data不能像之前一样指向一个对象,而是一个函数
  // 目的是防止组件被复用的时候产生数据的关联关系,从而造成干扰
  data(){         // 当前组件的data数据源
    return {      // 返回值return一个存放数据的对象
        username: 'zhangsan'
    }       
  },
  methods: {        
    console.log(this) // 这里的this指向的是当前Vue组件的实例对象
    changeName(){
      this.username = 'lisi'  // data方法中的username是当前组件的实例对象中的一个属性,可以通过 "对象.属性名" 来调用 
    }
  }
  // 当前组件的侦听器watch、计算属性computed的设置都跟之前的定义方式一样
}



3.  style--> 组件的样式

// css样式表的书写位置
// 加了lang属性才能使用less语法
<style lang="less">       
  .test-box {
  background-color: pink;
  }
  h3 {
    color: red;
  }
</style>


组件之间的关系


使用组件的三个步骤:

在App.vue组件中

1.  使用import语法 导入 需要的组件

// 写在script标签内
// @ 代表的是src这层路径
import Left from '@/compents/Left.vue'

2.  使用components节点 注册 组件

export default {
  components: {
    'Left': Left        // '组件名称': 组件 键值对
    // 因为键和值一样,所以直接简写为一个Left也可以
  }
}

注意1:使用components注册的节点是私有子组件

注意2:这里的组件注册名称的设置是为了在使用组件的时候写的标签名;而组件声明的时候可以设置的name属性(与data平级的name节点),主要是在存储的时候使用(在调试工具中也会显示自己设置的name属性)

注意3:若在声明组件的时候没有指定name属性,则组件的名称默认就是注册时的名称


3.  以标签的形式 使用 上面注册的组件

<div class="box">
  <Left></Left>
</div>

注意:组件创建后并没有生成实例,只有在以标签的形式使用了组件的时候才生成了组件实例( new Vue( ) )


私有子组件与全局组件

  • 通过components注册的是私有子组件

例如:在组件A的components节点下注册了组件B,则组件B只能用在组件A中,而不能用在别的组件中

在一些组件需要在不同组件中频繁使用的时候,需要在各个组件中注册,比较繁琐且代码冗余。可以通过全局组件解决

  • 注册全局组件

在vue项目的main.js入口文件中,通过Vue.component( )方法注册全局组件

// 在main.js中
// 导入需要全局注册的组件
import Count from '@/components/Count.vue'
// 使用Vue构造函数的component方法
// 参数1:表示组件的"注册名称",字符串格式。使用组件时的标签名就是<MyCount></MyCount>
// 参数2:需要被全局注册的组件
Vue.component('MyCount', Count)

注意!!!要先注册全局组件,再在实例中使用组件。(即必须在Vue实例化之前注册全局组件,否则组件不会生效)

目录
相关文章
|
15天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
67 7
|
14天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
38 18
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
13天前
|
前端开发 UED
vue3知识点:Suspense组件
vue3知识点:Suspense组件
27 4
|
12天前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
22 1
|
13天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
25 2
|
13天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
24 1
|
16天前
|
存储 JavaScript
Vue 组件间通信的方式有哪些?
Vue组件间通信主要通过Props、Events、Provide/Inject、Vuex(状态管理)、Ref、Event Bus等实现,支持父子组件及跨级组件间的高效数据传递与状态共享。
|
14天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
37 1
|
21天前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等