PHP试题网_免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: 【20201211】公告:复杂试卷成功上线,问答模块很快上线……网站将有诸多变化

接上篇序号。


9. components 组件

组件在vue中使用的非常普遍,它可以将一些公共的部分抽离出来,随处调用,通过传入不同的参数从而展现不同的数据,这也是vue所谓渐进式框架的精髓,在结合脚手架的开发模式中,几乎所有的页面都是一个组件,下面来看一下如何定义组件与使用组件。

定义子组件Header

在父组件Home中使用子组件Header

 

10. 组件之间的通信

(1). 父组件给子组件传值 props

①. 在父组件里调用子组件时指定属性,把要传递的值赋给属性

②. 在子组件内部声明props,并在props里声明接收参数的属性,这样就可以通过props拿到传递过来的数据

注意事项:

①. 在组件中,data属性必须是带有返回值,而且返回值是对象的方法

②. 如果在通过属性传值时,值是会变化,通过v-bind指令将变量绑定到属性

定义子组件Header并规定所接受的参数

在父组件Home里调用子组件Header并传参数

(2). 子组件向父组件传值 $emit()

①. 在调用子组件时通过v-on与@绑定自定义的事件的名称

②. 在子组件中传参给父组件时通过调用$emit,传递两个参数,一个为自定义的事件名称,一个为通过事件传递的数据

定义子组件Header并声明点击事件传递参数给父组件

在父组件Home里接收子组件Header传递过来的参数

(3). 父组件获取子组件的数据或方法:$refs

①. 在父组件件中调用子组件时通过 ref 为子组件指定一个名称

②. 在父组件件中通过 $refs 调用子组件数据或方法

定义子组件Header

在父组件Home中调用子组件Header,为它指定ref名称myHeader,在方法里通过this.$refs.myHeader获取Header的数据和方法

(4). 子组件获取父组件的数据或方法:$parent

①. 在子组件中通过 $parent 调用父组件的数据或方法

定义子组件Header

在父组件Home中定义子组件想要的数据,让子组件获取

(5). 兄弟组件之间通信,定义事件总线 eventBus

①. 定义一个公共事件总线 var eventBus = new Vue(),完成事件的触发和绑定

②. 在第一个组件中引入事件总线,传参时eventBus.$emit('事件名','参数')

③. 在第二个组件中引入事件总线,在生命周期钩子函数中监听eventBus.$on('事件名','function(){…...}')

定义事件总线

在第一个组件中引入事件总线,通过事件传参

在第二个组件中引入事件总线,通过事件接收参数

 

11. 组件分发内容slot

(1). 单个slot

子组件模板至少包含一个 <slot> 插口,否则调用子组件时,子组件内所分发的内容将会被丢弃

当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身

最初在 <slot> 标签中的任何内容都被视为备用内容,备用内容在子组件的作用域内编译,并且只有在调用子组件时,组件标签内没有要分发的内容时才显示备用内容

定义子组件son,在组件内预留插槽slot

在父组件里调用子组件,在子组件里分发内容

最终显示效果如下:

(2). 具名slot

slot元素可以用一个特殊的属性 name 来配置如何分发内容,多个 slot 可以有不同的名字,具名 slot 将匹配内容片段中有对应 slot 特性的元素

仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽,如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃

定义子组件son,在组件内添加slot,为slot指定name属性.

在父组件里调用子组件,在子组件里分发内容,为内容指定slot属性值

最终显示效果如下:

 

12. 动态组件is

通过使用预留的 <component> 元素,动态地绑定到它的 is 属性值,我们让多个组件可以使用同一个挂载点,并动态切换

 



作者:OK兄 浏览次数:1