Vue组件的简单介绍

最新推荐文章于 2023-04-25 22:12:57 发布

Tochanges

最新推荐文章于 2023-04-25 22:12:57 发布

阅读量230

点赞数 1

文章标签： vue vue.js

本文链接：https://blog.csdn.net/Tochanges/article/details/104621079

版权

在介绍组件之前，我们来说说 组件化
组件化就是将系统功能分离成独立的功能部分的方法，一般指的是单个的某一种东西，例如js、css而组件化针对的是页面中的整个完整的功能模块划分，组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
优点：代码复用，便于维护
划分组件的原则：复用率高的，独立性强的
组件应该拥有的特性：可组合，可重用，可测试，可维护

在vue中，我们通过Vue.extend来创建Vue的子类，这个东西其实就是组件

首先，要创建组件


let component=Vue.extend({template:"<h1>这里是组件</h1>"})

然后，注册一个组件 Vue.component(‘组件的名字’,创建的组件)

Vue.component('tel', component)

最后，把组件名当成标签名来使用，但组件名不能和标签名一致

看看简单的实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src='../vue.js'></script>
  <style>

  </style>
</head>
<body>
<div id='app'> 
  <tel></tel>
  <tel></tel>
  <tel></tel>
</div> 
<script>
// 组件的创建
let component=Vue.extend({template:"<h1>这里是组件</h1>"})
// 注册一个组件 Vue.component('组件的名字',创建的组件)
Vue.component('tel',component)
// 把组件名当成标签名来使用 组件名不能和标签名一致

let vm = new Vue({
  el:'#app',
})
</script>
</body>
</html>

结果为
在这里插入图片描述

组件继承自实例（声明的vm），实例有的组件也有，会有一些变异
组件的目的是为了实现复用

通过 Vue.componment 注册的组件叫全局组件
而上述的组件创建还有简写方式

// 全局组件创建的简写 参数1 组件名 参数2 组件的配置项
Vue.component('tel',{template:'<h1>呵呵哒</h1>'})

全局组件在所有的实例里都可以用
全局组件的注册要求写在实例的前方

当然有全局组件也就有局部组件
局部组件和全局组件的创建方式是一致，只是注册方式不一样
局部组件在哪注册就在哪用
局部组件注册在实例里的配置项 –components里

let vm = new Vue({
  el:'#app1',
  data:{
    name:'实例1'
  },
  components:{
    'tel':{template:"<h1>这里是局部组件tel</h1>"}
  }
})

所以 tel 组件只能在 id为 app1 的元素内使用

组件的配置项
template
和实例里的 el 类似关联dom元素
简单的dom结构可直接使用字符串（如上文）
dom结果复杂可用template标签，该标签再页面不会真正的渲染，但只允许有一个根元素，如下所示

//js
 Vue.component('hehe',{
   template:'#tp1'
 }) 
 let vm1 = new Vue({
  el:'#app1',
})

//html
<div id='app1'> 
    <hehe></hehe>
  </div> 
  <!-- 组件模板 -->
  <template id='tp1'>
    <div>//只允许有一个根元素
      <p v-for='item in 10'>{{item}}</p>
    </div>
  </template>

结果
在这里插入图片描述
data
组件中的data是一个函数，有返回值

let vm1 = new Vue({
  el:'#app1',
  data:{
    name:'这里是实例'
  },
  components:{
    hehe:{
      template:'#tp1',
      data(){
        return{ name:'张三'}
      }
    }
  }
})

组件继承自实例实例有配置项的组件都有，部分会发生改变，如 data , template…要想了解更多组件的配置项可进入vue官网进行了解。