Vue笔记(6)

学习内容

⊙ 父组件访问子组件的方式: $refs

⊙ 父子组件之间的访问

⊙ 插槽slot的基本使用

⊙ slot-具名插槽的使用

父子组件的访问方式

有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件

子组件访问父组件: 使用children或者refs

子组件访问父组件: 使用$parent

$children

• this.$children是一个数组类型,它包含所有的子组件对象
• 我们通过一个遍历,取出所有子组件的message状态

因为老师说children用得比较少,所以这里只介绍refs,只有在需要得到所有子组件的时候会用到

$refs

看一下结构:

当点击完按钮以后,打印出来的是空对象:

这是因为需要我们手动给cpn标签加上ref的属性

此时的$refs

比如我们现在在子组件中添加一个data

现在在父组件中可以这样访问:

$parent

浅浅套个娃:

还好我跟得上hhh,不然真的有点看不懂了

按按钮:

是一个vue组件对象

现在在父组件的data里添加一个name属性:

然后在子组件中打印出来:

但是这个用的也很少

$root

我们直接在刚刚的子组件里面访问根组件,看看出来的是什么:

是我们的Vue实例组件

但是用的也少...

插槽slot

组件的插槽

• 组件的插槽也是为了让我们封装的组件更加具有扩展性
• 让使用者可以决定组件内部的一些内容到底展示什么

例子

• 移动开发中,几乎每个页面都有导航栏
• 导航栏我们必然封装成一个插件,比如nav-bar组件
• 一旦有了这个组件,我们就可以在多个页面中复用了

现在创建一个组件

假如我们想要在每个相同的组件下面添加不同的内容

此时用slot就可以让我们的组件具有很强的扩展性

比如说下图的导航栏,在写的时候并不会把组件里面的内容给写死,而是预留插槽,根据不同的情况将不同的元素填充到插槽中

使用时,直接将标签放到组件标签中就可以了,会自动放入插槽中

slot里面还可以设置默认值

具名插槽

假设我们要做一个导航栏

由于里面的内容可能不同,所以放的都是插槽,分为左中右

那我们想要在特定的插槽里添加内容该怎么做呢,如果直接写入内容,会把3个插槽的内容都替换掉

所以我们可以给slot一个特定的name,让他变成具名插槽

这样刚刚的button就不会将插槽里的内容替换掉了,只会放入到没有name的插槽中

那么如何使用呢?

我们想要在哪个插槽里面加内容,就在哪个元素里加上slot的属性就可以了

但是刚刚弹幕好像说这个方法废弃了.....