学习内容
⊙ 父组件访问子组件的方式: $refs
⊙ 父子组件之间的访问
⊙ 插槽slot的基本使用
⊙ slot-具名插槽的使用
父子组件的访问方式
有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件
子组件访问父组件: 使用children或者refs
子组件访问父组件: 使用$parent
$children
因为老师说children用得比较少,所以这里只介绍refs,只有在需要得到所有子组件的时候会用到
$refs
看一下结构:
当点击完按钮以后,打印出来的是空对象:
这是因为需要我们手动给cpn标签加上ref的属性
此时的$refs
比如我们现在在子组件中添加一个data
现在在父组件中可以这样访问:
$parent
浅浅套个娃:
还好我跟得上hhh,不然真的有点看不懂了
按按钮:
是一个vue组件对象
现在在父组件的data里添加一个name属性:
然后在子组件中打印出来:
但是这个用的也很少
$root
我们直接在刚刚的子组件里面访问根组件,看看出来的是什么:
是我们的Vue实例组件
但是用的也少...
插槽slot
组件的插槽
例子
现在创建一个组件
假如我们想要在每个相同的组件下面添加不同的内容
此时用slot就可以让我们的组件具有很强的扩展性
比如说下图的导航栏,在写的时候并不会把组件里面的内容给写死,而是预留插槽,根据不同的情况将不同的元素填充到插槽中
使用时,直接将标签放到组件标签中就可以了,会自动放入插槽中
slot里面还可以设置默认值
具名插槽
假设我们要做一个导航栏
由于里面的内容可能不同,所以放的都是插槽,分为左中右
那我们想要在特定的插槽里添加内容该怎么做呢,如果直接写入内容,会把3个插槽的内容都替换掉
所以我们可以给slot一个特定的name,让他变成具名插槽
这样刚刚的button就不会将插槽里的内容替换掉了,只会放入到没有name的插槽中
那么如何使用呢?
我们想要在哪个插槽里面加内容,就在哪个元素里加上slot的属性就可以了
但是刚刚弹幕好像说这个方法废弃了.....