vue篇-slot(插槽)、具名插槽、编译作用域、作用域插槽

最新推荐文章于 2024-04-10 07:25:09 发布

请问大家代码怎么敲

最新推荐文章于 2024-04-10 07:25:09 发布

阅读量134

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/liumuye88888/article/details/117431557

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文深入探讨Vue.js中的组件插槽，包括默认插槽的使用，允许用户自定义组件内部内容；具名插槽的介绍，展示了如何通过name属性在组件内定义多个插槽；编译作用域的概念，解释了组件模板的作用范围；以及作用域插槽的讲解，说明如何在父组件中替换子组件的插槽并使用子组件提供的数据。

摘要由CSDN通过智能技术生成

插槽

组件的插槽是为了让我们封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示是什么

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <cpn><button>按钮</button></cpn>
      <cpn></cpn>


    </div>
</body>
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <!-- 插槽里面可以写默认值,如果组件里面没有内容,显示默认值,否则显示组件内容 -->
    <slot>66666</slot>  
  </div>
</template>
    <script src="../js/vue.min.js"></script>
    <script>
        var app=new Vue({
           el:'#app',
           data:{

           },
           methods:{

           },
          components:{
            cpn:{
              template:"#cpn"
            }
          }
        });
    </script>

<html>

具名插槽

在组件里可以定义多个插槽,要给插槽一个name
然后在组件使用的内部标签加上slot属性name值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn>
      <h2 slot ="left">我替换了左边</h2>
      <h2 slot ="right">我替换了右边</h2>
    </cpn>
  </div>
</body>
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <slot name='left'>左边</slot>
    <slot name='center'>中间</slot>
    <slot name='right'>右边</slot>
    <slot></slot>

  </div>
</template>
<script src="../js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {

    },
    methods: {},
    components: {
      cpn: {
        template: "#cpn"
      }
    }
  });
</script>

<html>

编译作用域

编译作用域很简单,就是组件写在哪个模板,作用域就是哪个模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <!-- 使用的是实例里面的isShow,看的是在哪一个模板里面
      		现在这个组件是显示的,因为他在app实例模板里面
      		 -->
      <cpn v-show = "isShow"></cpn>

    </div>
</body>
<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容</p>
    //这个button按钮是隐藏的,因为isShow的值,是cpn组件里面的data的值
    <button v-show = 'isShow'>按钮</button>
  </div>
</template>
    <script src="../js/vue.min.js"></script>
    <script>
        var app=new Vue({
           el:'#app',
           data:{
             isShow:true

           },
           methods:{

           },
          components:{
            cpn:{
              template:"#cpn",
              data() {
                return {
                  isShow:false
                }
              },
            }
          }
        });
    </script>

<html>

作用域插槽

父组件替换插槽的标签,但是内容由子组件来提供
给组件插槽一个动态属性名值为想要传递的数据如(:data = ‘planguage’,data这个值随意定义)
在app模板的组件里,vue2.5.x以下要使用template模板,以上可以随便使用,
slot-scope = ‘slot’(slot这个值随意定义)获取子组件的值,如值为{{slot.data}}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <cpn></cpn>
      <cpn>
        <!-- 目的获取子组件中的planguage  vue2.5.x以下要使用template模板-->
        <template slot-scope = 'slot'>
          <!-- {{slot.data}}就是planguage数据 -->
         <span v-for = 'item in slot.data'>{{item}}--</span>
         <br>
         <span>{{slot.data.join('---')}}</span>
        </template>
      </cpn>
      <cpn></cpn>
    </div>
</body>
<template id="cpn">
  <div>
    <slot :data = 'planguage'>
      <ul>
        <li v-for = 'item in planguage'>{{item}}</li>
      </ul>
    </slot>
  
  </div>
</template>
    <script src="../js/vue.min.js"></script>
    <script>
        var app=new Vue({
           el:'#app',
           data:{

           },
           methods:{

           },
          components:{
            cpn:{
              template:"#cpn",
              data() {
                return {
                  planguage:['python','java','c++','javascript']
                }
              },
            }
          }
        });
    </script>

<html>

请问大家代码怎么敲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue篇-slot(插槽)、具名插槽、编译作用域、作用域插槽

插槽组件的插槽是为了让我们封装的组件更加具有扩展性让使用者可以决定组件内部的一些内容到底展示是什么<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C
复制链接

扫一扫

专栏目录