slot 插槽

最新推荐文章于 2022-02-23 15:58:56 发布

六十的团子

最新推荐文章于 2022-02-23 15:58:56 发布

阅读量406

点赞数

分类专栏： Vue 文章标签： vue

原文链接：https://www.cnblogs.com/skyflask/p/10985963.html

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

基本使用

在子组件标签中插入相应代码即可


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例</title>

</head>
<body>

    <div id="app">
        <child-component>
            <p>分发的内容</p>
            <p>更多分发的内容</p>
        </child-component>
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>

        Vue.component('child-component', {
            template: '\
            <div>\
                <slot>\
                    <p>如果父组件没用插入内容,我将作为默认出现</p>\
                </slot>\
            </div>'
        });

        var app = new Vue({
            el: '#app'
        })

    </script>

</body>
</html>

具名插槽

  <template id='panel-tpl'>
      <div class="panel">
          <div class="title">
            <slot name='title'>{{title}}</slot>
          </div>
          <div class="content">
            <slot name='content'>{{content}}</slot>
          </div>
          <div class="bottom">
            <slot name='bottom'> {{bottom}}</slot>
          </div>
        </div>
  </template>
  
  
  
  
  Vue.component('title-slot',{
    template:`<div style='backgroundColor:red;height:40px'></div>`
  })

  Vue.component('content-slot',{
    template:`<div style='background:yellow;height:100px;'></div>`
  })
  Vue.component('bottom-slot',{
    template:`<div style='background:black;height:40px'></div>`
  })

<div id='app'>
   <panel>
    <div slot='title'><title-slot></title-slot></div>
    <div slot='content'><content-slot></content-slot></div>
    <div slot='bottom'><bottom-slot></bottom-slot></div>
   </panel>
</div>

在组件内部任意地方使用 <slot name='value'></slot> 标签挖坑.
可以在其内部放置任意数据当成是默认值.{{title}} {{content}} {{bottom}}
- 挖坑语法(组件定义): <slot name='slotname'>默认值</slot>
- 填坑语法(组件使用): <div slot='slotname'>任意内容(字符串,数据,其他组件等)</div> .. 注意,使用的使用是里用 <div slot> 而不是 <slot>
最重要的是,我们可以利用 slot,事先不建立组件和组件之间的依赖关系,完全利用 slot 这个抽象层,把坑挖好即可.

作用域插槽

作用域插槽：<slot :自定义name=data中的属性或对象></slot>

通过上边的默认插槽和具名插槽的使用过程中，发现，基本都是父组件中决定要插入到子组件中的内容，而子组件自行决定插槽的位置。

具名插槽，就是实现在子组件中自行决定自己要显示什么内容。

注意: 自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。

子组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
 
</head>
<body>
   <div id="root">
        <child>
            <template v-slot="props"><!--定义一个插槽，该插槽必须放在template标签内-->
                <li>{{props.value}}</li> //使用li方式进行渲染
            </template>
        </child>
        <child>
            <template v-slot="props">
                <h1>{{props.value}}</h1><!--定义不同的渲染方式-->
            </template>
        </child>
    </div>
    <script src='js/vue.js'></script>
    <script>
        Vue.component('child',{
            data: function(){
                return {
                    list:[1,2,3,4]
                }
            },
            template: `<div>
                            <ul>
                                <slot v-for="value in list" :value=value>//使用slot占位
                                </slot>
                            </ul>
                        </div>`
        })
 
        var vm=new Vue({
            el: '#root'
        })
 
    </script>
</body>
</html>

六十的团子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slot 插槽

基本使用在子组件标签中插入相应代码即可<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>示例</title></head><body> <div id="app"> <child-component> <p>分发的内容<
复制链接

扫一扫

专栏目录