插槽多种变化使用

目的：在每一个页面加上头相当于这个页面是干嘛的，也就是所谓的路由。

首页看一个例子

 

 

 

这里我们在main.js中引入了mainHeader这个组件,然后到了某个页面我们不想在每一个页面都去渲染头发，出现标题。

我们将mainHeader组件写入加上一个v-slot,

父传子再传title

在mainHeader组件

我们完全可以通过props传给字数据，再看子组件mainHeader中的具体内容

 

这样每一个界面就会出现不同的头部title,加button.

 

(这里我其实拉下了一段代码便是<slot/>)这样button才会出现

最近的话又整理了一些：

首先我自己打了个脚手架，在main.js里面注册一个准备插槽的组件

 

这个TitleHeader组件便是需要于插槽有关的那个组件

 

大家请看template的这个位置，如果你不写里面的东西就是button。。。。。那么

他就会显示增加汉字和删除汉字。。。。。。。。但是如果你再父组件里写东西，这里的父组件可想而知是HtmlComponent组件。。。。。就比如咱们写了button.那么出现的便是增加按钮和删除汉字。

 

解释下为什么会这样：v-slot:first.对应的便是子组件里的slot,父组件里没有v-slot:two说明他就会取默认值删除汉字。。。。。。大家一定，一定，一定要明白插槽父组件里是给他提供值的，而子组件里有默认值

 

转载于:https://www.cnblogs.com/MDGE/p/10970441.html