【Vue3从零开始-第三章】3-6 插槽和具名插槽

蜡笔小心_
VIP.5 如鱼得水
202 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

前言

在上一篇的文章中，我们了解了vue组件中父子组件通过事件进行通信的方法，今天我们继续深入了解一下vue组件中的插槽和具名插槽解决组件内容传递问题。

回顾

之前的内容中我们了解过了vue组件中传参的一些方法，通过v-bind指令或v-model指令都可以对子组件传递一些动态数据值。

疑问❓如果我们想要给子组件传递DOM元素要怎么做呢？是不是还要使用v-bind和v-model指令呢？

我们知道通过动态指令的方式去传递一些简单的字符串或者对象是比较简单的，但是DOM元素会设计到标签、动态数据，有些可能还要做动态绑定的操作。

在vue里面为了方便我们操作这样的事情，给了一个slot插槽标签。

slot

<script>
  const app = Vue.createApp({
    template: `
      <div>
        <myForm />
      </div>
    `
  });

  app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <button @click="handleClick">提交</button>  
      </div>
    `
  })

  const vm = app.mount('#root');
</script>

这段代码就是之前学过的父子组件的操作，如果这时候我们要把子组件中的button标签做成一个动态化的，使用父组件去传递过来，要怎么改一下代码呢？

<script>
  const app = Vue.createApp({
    template: `
      <div>
        <myForm>
          <button>提交</button>
        </myForm>
      </div>
    `
  });

  app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <slot></slot>
      </div>
    `
  })

  const vm = app.mount('#root');
</script>

  • 子组件中，将button标签删除，添加一个slot插槽标签。

  • 父组件中，调用子组件标签时，不用单标签了，可以改成双标签结束的方式。

  • 父组件中的子组件标签中就可以直接传递HTML标签了。

如果有多次调用子组件时，传递的HTML标签就可以自定义了。

const app = Vue.createApp({
    template: `
      <div>
        <myForm>
          <button>提交</button>
        </myForm>
        <myForm>
          <div>确定</div>
        </myForm>
      </div>
    `
});

image.png

之前我们在子组件里面添加的button标签是可以触发点击事件的，但是如果我们在slot插槽标签上添加事件呢？

app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <slot @click="handleClick"></slot>
      </div>
    `
})

Kapture 2022-04-20 at 21.00.54.gif

  • 浏览器中点击按钮时好像并不会触发任何事件，这时候我们可以在slot插槽标签外层添加一个span标签来触发事件。
app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <span @click="handleClick">
          <slot></slot>
        </span>
      </div>
    `
})

Kapture 2022-04-20 at 21.04.22.gif

  • 这种在子组件的slot插槽标签上触发事件的情况比较少，一般是在父组件传递子组件时就把事件绑定上去了。

slot作用域

上面的例子中我们会发现slot插槽的作用就是将父组件中子组件标签下面的DOM元素传递给子组件中的slot插槽，那么在传递给子组件的时候，如果在子组件标签里面的是动态元素，那用到的是子模板里面的数据呢还是父模板里面的数据呢？

const app = Vue.createApp({
    data(){
      return {
        text1: '提交',
        text2: 'xxx'
      }
    },
    template: `
      <div>
        <myForm>
          <button>{{text1}}</button>
        </myForm>
        <myForm>
          <div>{{text2}}</div>
        </myForm>
      </div>
    `
});

image.png

  • 父模板里面调用的数据属性，使用的都是父模板里面的数据。

  • 子模板里面调用的数据属性，使用的都是子模板里面的数据。

默认插槽

上面说的都是父组件将DOM元素写在子组件标签里面传递过去的，如果有些父组件里面调用子组件时，不传递DOM元素，但是子组件就要显示一些默认的内容了。

<script>
  const app = Vue.createApp({
    data(){
      return {
        text1: '提交',
        text2: 'xxx'
      }
    },
    template: `
      <div>
        <myForm>
          <button>{{text1}}</button>
        </myForm>
        <myForm>
          <div>{{text2}}</div>
        </myForm>
        <myForm>
        </myForm>
      </div>
    `
  });

  app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <span @click="handleClick">
          <slot>这里是默认内容</slot>
        </span>
      </div>
    `
  })

  const vm = app.mount('#root');
</script>

image.png

  • 父组件里面调用了一个空的子组件标签。

  • 子组件中的slot插槽标签中写上默认内容。

  • 当父组件传递了插槽内容，slot标签就会自动匹配传递过来的插槽内容。

  • 如果不需要在子组件里面显示默认内容，也可以直接用一个空的slot插槽标签。

具名插槽

有些时候，我们需要使用一些自定义布局，而这些布局内容可能都会通过插槽的方式去实现。

下面我们就实现一个上中下布局的样式。

<script>
  const app = Vue.createApp({
    template: `
      <div>
        <layout>
            <div>头部内容</div>
            <div>底部内容</div>
        </layout>
      </div>
    `
  });

  app.component('layout', {
    template: `
      <div>
        <slot></slot>
        <div>中间内容</div>
        <slot></slot>
      </div>
    `
  })

  const vm = app.mount('#root');
</script>

image.png

  • 在浏览器中我们会发现slot插槽标签把父组件中传过来的DOM元素都渲染在一个slot插槽里面的，这样就导致中间内容的上下slot插槽标签里面都是父组件传过来的DOM元素了。

这时候我们就要给插槽取个名字，也就是具名插槽，让slot插槽标签可以更快的匹配对应的内容。

  • 父组件中调用子组件标签时，在里面传递的DOM标签中添加一层template占位元素。

  • 然后使用 v-slot:xxx的方式匹配子组件中的插槽

const app = Vue.createApp({
    template: `
      <div>
        <layout>
          <template v-slot:header>
            <div>头部内容</div>
          </template>
          <template v-slot:footer>
            <div>底部内容</div>
          </template>
        </layout>
      </div>
    `
  });

  • 子组件中的slot标签上使用name属性定义名称。

  • 父组件使用v-slot匹配的就是这里的name属性。

app.component('layout', {
    template: `
      <div>
        <slot name="header"></slot>
        <div>中间内容</div>
        <slot name="footer"></slot>
      </div>
    `
})

image.png

总结

本篇文章主要就是把vue里面的插槽和具名插槽详细讲解了一遍，希望学习的小伙伴可以多敲一敲代码熟悉熟悉这里面的内容，在项目中写组件的时候会经常用的哦~~~

avatar
文章
阅读
粉丝