首页 > 技术分享 > Vue
收藏

Vue组件入门

08/19 09:30
大潇博客 原创文章,转载请标明出处

前言

Vue组件化:把一个网页分割成不同区域,每个区域都可看做一个组件。

组件是Vue最常用的功能。

每个组件包含:功能(js代码)、内容(模板代码)、样式(css代码,需要构建工具支撑)。

组件属性也可以被提取到Vue实例中,因此可以通过{{属性名}}直接使用


开发一个组件需要三步:

1、创建组件

2、注册组件(全局注册、局部注册)

3、应用组件


必备知识

使用Vue组件,首先明白箭头函数,理解ES6模块化。


创建组件

创建一个最最简单的组件:

var title = {

      template: `<h1>我是标题</h1>`

}

创建一个包含数据的组件:

var title = {

      data(){

            return {

                  title: '内容管理系统'

            }

      },

      template: `<h1>{{title}}</h1>`

}

通过上面案例可以看出:

在Vue中创建组件,就是创建一个配置对象,该配置对象和Vue实例的配置几乎一样


组件配置对象:

var Comp = {

      //不再是普通对象,而是一个函数,该函数返回的对象作为数据

      data(){

            return {

                  //变量

            }

      },

      computed: {

            //计算属性

      },

      methods: {

            //方法

      },

      template: `...模板`,

      render(m){ ... }

}


组件配置和Vue实例配置的区别:

1、组件没有el

2、组件的data不是对象而是函数,该函数返回对象作为数据

3、组件虚拟DOM树必须定义在template或render中


注册组件

注册组件分为全局注册和局部注册

全局注册:全局注册的组件,整个应用中任何地方都可以使用(包括Vue实例中,其它组件中)

全局注册方法:

Vue.component("组件名", 组件配置)


局部注册:在Vue实例中,使用components注册,使用速写属性

比如定义一个组件Title,在Vue配置中局部注册:

new Vue({

      components: {Title},

      template `<div><Title></Title></div>`

}).$mount("#app");


组件之间可以相互使用,没有注册的组件不能使用

大部分场景不建议使用全局注册,因为使用构建工具时,可能会导致工具无法优化打包,影响打包结果,一般情况是组件在哪里用,就在哪里注册


官方推荐的两种组件命名法:

1、大驼峰命名法,比如:MyTitle

2、短横线命名法,比如:my-title

用大驼峰命名后,使用组件时既可以使用驼峰式,也可使用短横线式,比较灵活


应用组件:

把注册的组件当成一个元素来用,有两种写法,“<组件名/>”和“<组件名></组件名>”

比如使用大驼峰命名法注册了一个全局组件:

Vue.component("MyTitle", title);

使用方法:

new Vue({

      template: `<MyTitle />`, //写法一

      template: `<MyTitle></MyTitle>`, //写法二

      template: `<my-title />`, //写法三

      template: `<my-title></my-title>`, //写法四

}).$mount("#app");


注意,使用多个组件时,组件外必须被标签包裹,比如:

<div>

      <组件1 />

      <组件2 />

      <组件3></组件3>

</div>


向组件传递数据:

向组件传入数据的方式有很多种,最常用的是组件属性props,在属性props的数组里可以写需要的参数,类似于函数的参数

在Vue中,实例或组件的data配置变量,但data()是组件内部的,不推荐修改,所以不能用data接收数据


首先在组件里申明需要接收哪些属性

var MyCom = {

      props: ['title','page','pagesize'],

      template: `<h1>{{title}}</h1>`

}

使用组件时,向其传递属性

new Vue({

      components: {

            MyCom

      },

      data: {

            page: 1

      },

      template: `

            <div>

                  <MyCom title="雇员管理系统" :page="page" :pagesize="10" />

            </div>

      `

}).$mount("#app");

如上所示,三种传参方式:

1、直接传字符串,比如title="雇员管理系统"

2、使用v-bind绑定变量,比如:page="page"

3、使用v-bind固定参数类型,比如:pagesize="10",传入数字10,类型为int


需要注意的是,props有两种格式,一种是数组,其中只写参数名即可,如上所示,另一种是对象格式,如:

var MyCom = {

      props: {

            title: '',

            page: '',

            pagesize: {},

      }

}

既然有对象格式,说明它可以做一些配置,比如:

var MyCom = {

      props: {

            //约束类型

            title: String,

            //约束多个类型

            page: [String, Number, Object],

            //自定义校验规则

            pagesize: {

                  type: Boolean,   //约束类型

                  required: true,   //必传属性

                  default: 10,        //默认值

                  //自定义函数

                  validator: function(n){

                        return n==='fine' || n==='ok';

                  }

            }

      }

}


在组件中,属性只读,不可在组件中更改属性,这叫做单项数据流(即:组件中定义的属性,组件自己不可以修改)


打赏

阅读排行

大家都在搜

博客维护不易,感谢你的肯定
扫码打赏,建议金额1-10元
  • 15601023311