vue中的插槽slot理解

Posted czy960731

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的插槽slot理解相关的知识,希望对你有一定的参考价值。

本篇文章参考赛冷思的个人博客

1.函数默认传参

在我们写js函数我们的可能会给他们一个默认的参数,写法是

function show(age,name){
  var age = age || 20;
  var name = name || 张三;
console.log(age,name); } show();
// 20,张三 show(18,"命名") // 18,明明

如果用户不传入参数,那么会输出默认值,如果用户传入,会输出传入的值,这种写法很灵活

vue中的组件,也可以有默认的模板,当我们调用一个组件,啥都不传时,显示我们定义的默认模板,当我们传了自定义模板时,就应该使用我们自定义的模板,来替换默认模板,那么,今天说的slot,其实它就是实现的这个功能,可以理解为函数的传参。下面以类似官方的例子进行解释。

现在有个一个模板 child

<div>
      <h2>我是子组件的标题</h2>
      <slot>
        <p>当父组件调用我时,没有传自定义内容时,我就会显示了,如果传了自定义内容,我就不显示了。</p>
      </slot>
</div>

slot中的就是默认参数,如果我们不传入参数

<child></child>就会被渲染成

<div>
      <h2>我是子组件的标题</h2>
        <p>当父组件调用我时,没有传自定义内容时,我就会显示了,如果传了自定义内容,我就不显示了。</p>
</div>

如果我们传入参数

<child><p>这是我自定义的内容,覆盖子组件slot中的内容</p></child>渲染为

    <div>
          <h2>我是子组件的标题</h2>
          <p>这是我自定义的内容,覆盖子组件slot中的内容</p>
    </div>     

我们可以看到child中的元素会把模板中的内容改变,就好像我们传入的参数一样,所有理解为默认模板

但是可以看到,这种方式过于粗暴,并且只能定义一块默认内容,不是很方便,所以官方说了,slot还提供了一个具名功能,意思就是,在子组件定义slot时,加个标识,在父组件调用,自定义内容时,也加上标识,这样就实现了可以在任意地方定义默认内容,下面有请具名slot,其实就是给slot起个名字

<div class="container">
      <header>
        <slot name="header"><h1>默认header</h1></slot>
      </header>
      <main>
        <slot><p>默认main</p></slot>
      </main>
      <footer>
        <slot name="footer"><p>默认footer</p></slot>
      </footer>
</div>

上面的是子组件,我们给每一个slot一个name属性,如果是默认值的话,name是没有什么作用的,在传参时,我们可以让child中的元素,加上slot属性

<div>
      <child>
          <h1 slot=‘header‘>自定义标题</h1>
          <p slot=‘footer‘>自定义底部</p>
          <p>自定义main</p>
      </child>
</div>

所以,我们的child最后就被渲染成了

<div>
      <div class="container">
          <header>
            <h1>自定义标题</h1>
          </header>
          <main>
            <p>自定义main</p>
          </main>
          <footer>
            <p>自定义底部</p>
          </footer>
    </div>
</div>

在子组件定义slot加个name属性值,在父组件调用时,加上slot属性,值就是子组件中slot的name属性值,这样就会自动定位到对应的slot中,就实现了多个地方定义默认内容。


以上是关于vue中的插槽slot理解的主要内容,如果未能解决你的问题,请参考以下文章

Vue 开发之插槽(slot)的理解和使用

vue中的插槽slot理解

vue插槽 Slots

vue插槽

深入理解vue中的slot与slot-scope

vue Slot理解