父子组件间的通信,插槽(slot)

一.父子组件间的通信

1.父向子传递父组件里面拥有的信息(借助props)

父组件

父子组件间的通信,插槽(slot)_第1张图片

 子组件:

注意:props中的数据只可以只读不可编辑

父子组件间的通信,插槽(slot)_第2张图片

 2.子向父传递信息:子组件可以使用 $emit,让父组件监听到自定义事件 。

父组件:

父子组件间的通信,插槽(slot)_第3张图片

 子组件:vm.$emit( event, arg ) //触发当前实例上的事件

父子组件间的通信,插槽(slot)_第4张图片

二.插槽(slot)

1.什么是插槽?

插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重要性。插槽显不显示是由父组件控制的,而插槽在哪里显示是由子组件控制的。

2.插槽的分类:

插槽有三种:默认插槽,具名插槽,作用域插槽;

3.插槽的使用:

(1)默认插槽的使用:

语法:

1.首先,在子组件中定义默认的插槽 父子组件间的通信,插槽(slot)_第5张图片

 

注意:在子组件中,你可以定义多个默认插槽,并在子组件中决定这些默认插槽的位置,父组件要插入的内容,都会被填充到这些默认的插槽中:

2.在父组件中子组件的标签里写出自己想要写的内容。

父组件定义要插入到子组件插槽的内容,并不一定是dom结构类型,也可以是一个组件,也可以是普通的数据结构,只要子组件有定义插槽,就会把内容填充进去。

父子组件间的通信,插槽(slot)_第6张图片

(2)具名插槽:在子组件中定义插槽是,给对应的插槽分别起个名字,方便后边插入父组件将根据name来填充对应的内容

语法:

 父子组件间的通信,插槽(slot)_第7张图片

父子组件间的通信,插槽(slot)_第8张图片 

 (3)作用域插槽:实现在子组件自行决定自己要显示什么内容

语法:

子组件有多个作用域插槽时:

 父子组件间的通信,插槽(slot)_第9张图片

父子组件间的通信,插槽(slot)_第10张图片 

 

你可能感兴趣的:(总结,前端,开发语言,vue.js)