《Vue.js 前端开发技术与实践》课件-第6章 组件

第6章组件组件（Component）是Vue最强大的功能之一。组件可重用性高，可减少重复性的开发。在Vue中组件是构成页面中独立结构单元，是从UI界面的角度来进行划分的，Vue可以把网页分割成很多组件。6.1Vue组件组件（Component）是Vue最强大的功能之一。组件可重用性高，可减少重复性的开发。6.2组件定义及调用6.2.1全局组件的定义及调用（1）全局组件的定义语法：Vponent('组件的名称'，{以对象的形式描述组件的配置选项})①“组件名称”的命名:规范中自定义组件名推荐是使用kebab-case(短横线分隔命名)

②配置选项对象:选项对象属性有data、computed、watch、methods以及生命周期钩子等③组件的结构模板，模板中只能有一个根节点。④Data定义组件的初始数据，与newVue的data选项定义不同，组件是可复用的，所以数据要定义为私有的状态，必须要把data定义为一个函数，并且要求返回一个对象。例如：

data:

function

()

{

return

{

msg:

'hello

Vue!'

}

},全局组件，在全局都可以调用，调用组件跟使用标签一样，标签名为组件名即可。（2）全局组件的调用局部组件是定义在Vue实例上，在一个实例上定义，就在该实例所挂载的区域内使用，使用配置项components（复数），一个实例可以配置多个组件，多个组件配置在一个对象中。6.2.2局部组件的定义及调用局部组件，只在定义它的实例所挂载的区域内使用，调用方法跟全局组件调用方法相同。语法：components：{

组件名1：{组件配置选项},组件名2：{组件配置选项},……

}6.3组件的层级关系网页合理分割成很多组件，组件可以嵌套组件，形成组件层级父子关系、兄弟关系。（1）定义全局组件的层级关系全局组件的层次关系是在调用时确定的。（2）定义局部组件的层级关系局部组件定义层级关系，每个组件都有Components配置选项来配置嵌套下级组件。6.4组件之间的通讯组件默认只能调用自己的属性和方法，不能调用其它组件的属性和方法，如要调用就需要用到数据通信。6.4.1父组件传递数据给子组件在子组件中props选项定义属性来接收父组件传来的数据。在子组件中定义结构，数据定义在父组件中，在调用子组件时，通过绑定属性来传值。Props的值类型可以定义为数组，用数组来定义多个属性。例：

props:

['msg',

'open'],如定义的属性需要指定类型检测、自定义验证和设置默认值，Props的值类型定义为对象。props:{//检测类型height:Number,//检测类型+其他验证

age:{

type:Number,

default:0,

required:true,

validator:function(value){returnvalue>=0}

}}1、在子组件中props选项定义属性传递静态或动态的数据给在子组件props中定义的属性。2、在父组件中调用子组件

<child

msg="小学"></child>可以用v-bind将动态props绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件。传入的值除字符串类型的，其它类型需要v-bind指令绑定属性。

<child

v-bind:msg='stage'

:open='open'></child>（3）子组件调用父组件的方法父组件调用子组件时通过绑定自定义事件，把方法传递给子组件，在子组件中通过$emit触发该事件。6.4.2子组件传递数据给父组件在父组件调用子组件时，通过v-on指令绑定一个自定义事件，在父组件中定义的处理函数（方法），在子组件中通过$emit触发该事件，执行该方法，通过传递参数把数据传递给父组件。（2）使用$refs（1）使用自定义事件在调用子组件时使用ref属性，通过$refs得到ref属性值对应的组件实例，得到该实例后，父组件就有了该子组件的控制权，可以访问该子组件的数据，调用该子组件的方法等。6.4.3兄弟之间的数据传递通过事件总线varbus=newVue()，一个组件使用bus.$on侦听事件，另一个组件使用bus.$emit触发事件。事件总线可以用于任何组件之间通信，解决跨级传递的问题。6.5动态组件多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用内置组件component，使用该组件的is属性动态地绑定组件，依is的值，来决定哪个组件被渲染。6.6内置组件keep-alivekeep-alive组件主要用于保留组件状态或避免重新渲染。6.7插槽语法:<slotname=”插槽名”v-bind:属性（prop）=’表达式’>插槽默认的内容</slot>（1）在子组件中定义插槽语法：<templatev-slot:插槽名=”数据对象”>插入的内容</template>（2）在父组件调用插槽6.8单个文件组件单个文件组件由结构template、样式