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

2022-09-26 429

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇的文章中，我们了解了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>
    `
});
复制代码

9CE]K8W7EM6DITNUUY7B9~N.png

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

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

[X9IE84$5(AQ06(9X44Z11H.png

浏览器中点击按钮时好像并不会触发任何事件，这时候我们可以在slot插槽标签外层添加一个span标签来触发事件。

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

L]S$UOW7@7OIE]GEZ0OZHJW.png

这种在子组件的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>
    `
});
复制代码

FU{U1}D)C9UX(6OK3OX(}2J.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>
复制代码

M2A%81T]@YT%U7ST7BDI}LB.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>
复制代码

3XKM{E]TGHXTHXG()E(VE82.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>
    `
})
复制代码

4L7FO[GZ)BHCZ}[TF~]5_B2.png

总结

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

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

前言

回顾

slot

slot作用域

默认插槽

具名插槽

总结

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

前言

回顾

slot

slot作用域

默认插槽

具名插槽

总结

热门文章

最新文章

相关电子书