vue基础-组件&插槽

组件化的意义:封装(复用,把逻辑隐藏起来,提高可维护性),快速开发(搭积木)
约定:我们通常把那些除了HTML标签以外的自定义组件,才称为‘组件’,结论是,我们说“父组件”“子组件”指的是

本质:就是HTML的扩展。结论:我们在使用组件时,要把它当成HTML一样的感觉来使用

定义一个组件

语法:Vue.component("组件名","选项")

第一个参数,‘组件名’:必须是两个以上的”单词“,并且要用中划线(-)连接

第二个参数,选项:除了el不能用,其他选项都可以使用,比如data,methods,生命周期,watch,computed

template选项:对组件来讲,有一个必须的选项是template,这个选项用于指定当前视图的模板(HTML字符串),在视图模板中可以使用我们学过的所有指令

template视图结构必须是”单一节点“

data选项:组件可以有自己独立的data选项,但是data不再是一个{},必须是一个工厂函数

props选项:props表示由父组件作用域传递过来的‘自定义属性’,接收之后可以通过this访问。所以props数据可以在当前组件中的指令,其他选项中使用,

props:父组件向子组件传递数据,子组件使用props接收,可以传递基本数据类型,引用数据类型

$emit('自定义事件名称','...将要回传给父组件的数据列表'):用于触发一个自定义事件,同时向父组件传递数据

结论:组件化的核心就是"自定义属性props","自定义事件$emit()"+"自定义插槽"

1.props是子组件的一个选项,用于接收父组件给我的自定义属性 =>v-bind,简写为:

2.$emit(),是一个vue api,用于触发父组件给我的自定义事件(向父组件发送数据)=>v-on 简写为@

3.slot,是vue的一个内置组件,可以直接使用,称为”插槽“=>v-slot 简写为#

image

父子组件通信

1.当组件需要向子组件传递参数时,我们使用自定义属性,再在子组件中使用props接收即可

2.当子组件需要向父组件传递数据时,我们使用自定义事件,在子组件中使用$emit()触发并回传数据
自定义事件,在子组件中无需接收,可以直接使用。自定义属性,在子组件必须使用props接收,否则用不了

插槽

如何理解插槽?当我们封装自定义组件时,从组件结构的角度看,某些结构是不确定的,那么我们使用slot占个位置。当这组件被真正使用时,才能够确定这个位置放什么元素,这就叫”插槽“(插座,有插孔,但是你不确定插什么)

结论:以后封装组件,哪个地方不确定,就放一个slot占位置。如果有多个地方不确定,就放多个不同的slot

如何区分slot的不同呢?使用”命名插槽“,给slot name=’‘

1.slot默认叫”default“

2.v-slot是一个指令,用于指定用哪个slot来显示当前元素,简写#

3.slot xxx 可以添加任意的自定义属性,在父组件中使用v-slot来获取数据

看结构的不同来确定哪里用slot呀

image


image

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwgggz.html