组件

jinglisha
355 阅读3分钟

是什么

是一个对象。绝大部份情况下，一个组件就是页面上的某个区域

组件包含该区域的：

  1. 内容（模版代码）
  2. 样式（css代码） 要在组件中包含样式，需要构建工具的支撑
  3. 功能（js代码）

意义

组件出现的意义：

  1. 降低整体代码的复杂度，提升代码的可读性和可维护性 将粗粒度划分为细粒度 粒度的单位是整个网站
  2. 提升局部代码的可复用性

组件开发

创建组件

组件是根据一个普通的配置对象创建的，所以，要开发一个组件，只需写一个配置对象

// 组件配置对象
var myComp = {
   data(){
       return {
            count: 0
       }
   },
   template:`
    <button>点击了{{count}}次</button>
   `
}

为什么data要配置为一个函数？ 为了可以复用，因为每次复用的时候，就会重新调用函数，得到一个新的对象，这样就避免了组件之间的数据相互影响。

就算是复用同一个组件，但每一个组件之间是不同的实例。

注册组件

创建完组件之后页面还是没东西，他都不知道组件往哪里放。

所以，创建完之后还要注册，注册完之后才能使用组件。

注意：注册完不代表页面显示内容！只代表可以使用。

注册组件分为两种方式：全局注册和局部注册。

全局注册

注册完之后，任何地方都可以使用这个组件

如下图： image.png 如何全局注册？

Vue.component('组件名称',配置对象)

Vue.component('MyBtn',myComp)

注册完才可以使用，如何使用?

var vm = new Vue({
   el:'#app',
   template:`
    <MyBtn />
   `
})

局部注册(推荐)

在vue实例里配置components

var vm = new Vue({
    el:'#app',
    data: {

    },
    components:{
        MyBtn: myComp
    },
    template:`
        <MyBtn />
    `
})

应用组件

必须要有/结束

<MyBtn />

命名方式

  1. 短横线命名法(kebab-case)

    <my-btn />

  2. 大驼峰命名法(PasCalCase)（推荐） 有的组件可能只有一个单词，可能会和html元素冲突

    <MyBtn />

组件树

image.png

向组件传递数据

组件中的data函数是自己的数据，把从外部传递给组件的数据叫做组件的属性。

props: 声明组件的属性

举例说明：

<div id="app"></div>

// 创建组件
var Title = {
    props:['biaoti1','biaoti2'],
    template:`
    <div>
        <h1>{{biaoti1}}</h1>
        <h2>{{biaoti2}}</h2>
    </div>
    `
}

var vm = new Vue({
    el:'#app',
    // 注册组件
    components:{
        Title
    },
    // 使用组件
    template:`
    <div>
        <Title biaoti1="标题1" biaoti2="标题1-1"/>
    </div>
    `
})

image.png 注意：在组件中，属性是只读的，绝不可以更改，这叫做单向数据流。

组件内部不可以更改属性！！

image.png

工程结构

因为项目里会有很多组件，我们需要有一个合理的结构来组织这些组件。 那么，按照什么结构来写呢？

  1. 在项目中建立src文件夹

    image.png

  2. 建立入口文件mian.js，在index.html里引入该js

    <script src="./src/main.js" type="module"></script>

  3. 在main.js里创建vue实例 (1). 创建实例之前先引入Vue构造函数

    import Vue from './vue.broswer.js'

    (2). 创建vue实例，挂载到id为app的元素上去

    (3). 实例里只做一件事：渲染组件。不用写data和配置，剩下的事情全部交给组件完成。render里创建根组件

    new Vue({
    // components:{
    //     App
    // },
    // template:`<App />`,
    // 相当于
    render(h){ // 渲染组件
        return h(App)
    }
    // 简化
    //render:(h) => h(App)
}).$mount('#app') // 实例挂载到id为app的元素上

  4. 创建根组件对象App.js，在入口文件里渲染根组件

    import App from './App.js'

  5. 创建子组件，在根组件里引入并注册子组件文件

    // 引入子组件
import MyBtn from './components/MyBtn.js'

// 导出根组件
export default{
   components:{ // 注册子组件
       MyBtn
   },
   template:`
   <div>
       <h1>App组件</h1>
       <MyBtn />
   </div>
   `
}
avatar
文章
阅读
粉丝