Vue(小码哥王洪元)笔记03slot插槽的基本使用，封装的原则，插槽的默认值，具名插槽，编译的作用域，作用域插槽

最新推荐文章于 2023-07-01 21:52:30 发布

心湖中的石子

最新推荐文章于 2023-07-01 21:52:30 发布

阅读量550

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43745804/article/details/112448126

版权

Vue 专栏收录该内容

48 篇文章 15 订阅

订阅专栏

1、slot插槽的基本使用

插槽的作用是为了让组件更具有扩展性
直接在组件模板需要的地方放入 <slot></slot>标签对

<template id="cpn">
  <div>
    <div>我是组件 </div>
    <slot></slot>
  </div>
</template>

2、封装的原则

抽取共性，保留个性，对个性的部分预留插槽slot

3、插槽的使用

<body>
<!--父组件模板-->
<div id="app">
  <cpn>
    <!--组件内部填入的标签会自动插入到插槽中-->
    <button>案例</button>
  </cpn>
  <cpn><input type="text"></cpn>
  <cpn></cpn>

</div>
  <!--子组件模板-->
<template id="cpn">
  <div>
    <div>我是组件 </div>
    <slot></slot>
  </div>
</template>

<script type="text/javascript">

var app=new Vue({
  el:"#app",
  
  data:{
    message:'hello world'
  },
  methods:{
    
  },
  components:{
    'cpn':{
      template:"#cpn",
      
    }
  },
  
}
  
);

</script>
</body>

4、插槽的默认值

在模板的slot标签对之间插入的标签将成为插槽的默认值，如果在html中没有在自定义组件标签对之间插入相应标签，则会使用插槽内容的默认标签
如果有多个值，同时放入到组件进行替换时，一起作为替换元素

<body>
<!--父组件模板-->
<div id="app">
  <cpn>
    <!--组件内部填入的标签会自动插入到插槽中-->
    <button>案例</button>
  </cpn>
  <cpn><input type="text"></cpn>
  <cpn></cpn>

</div>
  <!--子组件模板-->
<template id="cpn">
  <div>
    <div>我是组件 </div>
    <!--设置插槽的默认标签-->
    <slot><button>模板中的默认按钮</button></slot>
  </div>
</template>

<script type="text/javascript">

var app=new Vue({
  el:"#app",
  
  data:{
    message:'hello world'
  },
  methods:{
    
  },
  components:{
    'cpn':{
      template:"#cpn",
      
    }
  },
  
}
  
);


</script>
</body>

5、具名插槽的是使用

定义多个插槽的时候，解决如何调用的问题
直接给slot插槽标签定义一个name属性即可

<slot name='cneter'><span>中间的文字</span></slot>

在html中应用自定义组件中，替换插槽时，为替换标签设置slot属性，属性值为模板中定义的响应name的取值

<body>
<!--父组件模板-->
<div id="app">
  <cpn>
    <span slot="center">替换后的文字</span>
  </cpn>


</div>
  <!--子组件模板-->
<template id="cpn">
  <div>
    <div>我是模板</div>
    <!--设置插槽的默认标签-->
    <slot name='left'><span>左边的文字</span></slot>
    <slot name='center'><span>中间的文字</span></slot>
    <slot name='right'><span>右边的文字</span></slot>

  </div>
</template>

<script type="text/javascript">

var app=new Vue({
  el:"#app",
  
  data:{
    message:'hello world'
  },
  methods:{
    
  },
  components:{
    'cpn':{
      template:"#cpn",
      
    }
  },
  
}
  
);


</script>
</body>

在这里插入图片描述

只要没有name属性的slot插槽都会被替换，如果有name属性则被指明替换

6、编译的作用域

实例编译的数据，在实例总找
组件编译的数据，在组件中找、

<body>
<!--父组件模板-->
<div id="app">
  <cpn v-show="isshow"> </cpn>


</div>
  <!--子组件模板-->
<template id="cpn">
  <div>
    <div>我是模板</div>
    
  </div>
</template>

<script type="text/javascript">

var app=new Vue({
  el:"#app",
  
  data:{
    isshow:true
  },
  methods:{
    
  },
  components:{
    'cpn':{
      template:"#cpn",
      data(){
        return {
          isshow:false
        }
      }
      
    }
  },
  
}
  
);


</script>
</body>

7、作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供

听说slot-cope在vue2.6以后被弃用了，但亲测2.6可以使用

1、子组件中创建数据

components:{
    'cpn':{
      template:"#cpn",
      data(){
        return {
          pLanguages:['javascript','java','python','c#']
        }
      }
      
    }
  },

2、模板文件中创建插槽slot，在插槽标签中创建一个自定义的数据属性，指向子组件的data数据

<template id="cpn">
  <div>
    <div>
    //这里在插槽中定义一个指向子组件数据的属性：landata
      <slot :landata="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
      </slot>
    </div>
    
  </div>
</template>

3、html中的root中使用自定义组件
使用自定义组件要使用template模板标签，并设定slot-scope值为slot
应用数据的使用使用slot.landata，其中landata为在模板中设定的自定义属性名

<div id="app">
  <cpn> </cpn>
  <cpn>
    <!--需要获取子组件的pLanguages-->
    <template slot-scope="slot">
      <span v-for='item in slot.landata'>{{item}}-</span>
    </template>
  </cpn>


</div>

完整代码

<body>
<!--父组件模板-->
<div id="app">
  <cpn> </cpn>
  <cpn>
    <!--需要获取子组件的pLanguages-->
    <template slot-scope="slot">
      <span v-for='item in slot.landata'>{{item}}-</span>
    </template>
  </cpn>


</div>
  <!--子组件模板-->
<template id="cpn">
  <div>
    <div>
      <slot :landata="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
      </slot>
    </div>
    
  </div>
</template>

<script type="text/javascript">

var app=new Vue({
  el:"#app",
  
  data:{
    isshow:true
  },
  methods:{
    
  },
  components:{
    'cpn':{
      template:"#cpn",
      data(){
        return {
          pLanguages:['javascript','java','python','c#']
        }
      }
      
    }
  },
  
}
  
);


</script>
</body>

心湖中的石子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue(小码哥王洪元)笔记03slot插槽的基本使用，封装的原则，插槽的默认值，具名插槽，编译的作用域，作用域插槽

1、slot插槽的基本使用插槽的作用是为了让组件更具有扩展性直接在组件模板需要的地方放入 <slot></slot>标签对<template id="cpn"> <div> <div>我是组件 </div> <slot></slot> </div></template>2、封装的原则抽取共性，保留个性，对个性的部分预留插槽slot3、插槽的使用&
复制链接

扫一扫