Vue.js-插槽

最新推荐文章于 2023-06-05 11:07:02 发布

guardwhy

最新推荐文章于 2023-06-05 11:07:02 发布

阅读量289

点赞数

分类专栏： # Vue.js

本文链接：https://blog.csdn.net/hxy1625309592/article/details/116149745

版权

Vue.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.1 为什么使用slot

组件的插槽

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

slot基本使用

在子组件中，使用特殊的元素就可以为子组件开启一个插槽。

该插槽插入什么内容取决于父组件如何使用。

中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot-插槽的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
      <cpn></cpn>
      <cpn><span>php是最好的语言!!!</span></cpn>
      <cpn><i>python一出，谁与争锋!!</i></cpn>
    </div>

    <template id="cpn">
      <div>
        <h2>我是组件</h2>
        <p>我是子组件模板</p>
		<!--设定默认值-->
        <slot><button>按钮</button></slot>
      </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          message: 'hello world!'
        },
        components: {
          cpn:{
            template:'#cpn'
          }
        }
      })
  </script>
</body>
</html>

执行结果

1.2 具名插槽slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
外面在给插槽插入内容时，如何区分插入的是哪一个呢？这个时候，就需要给插槽起一个名字。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>具名插槽的使用</title>
</head>
<body>
<!--2.定义一个div元素-->
    <div id="app">
     <cpn><span slot="center">标题</span></cpn>
      <cpn><button slot="left">返回</button></cpn>
    </div>

    <!--子组件模板-->
    <template id="cpn">
      <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
      </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          message: 'hello world!'
        },
        components: {
          cpn: {
            template: '#cpn'
          }
        }
      })
  </script>
</body>
</html>

执行结果

1.3 编译作用域

父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编译的作用域</title>
</head>
<body>

<div id="app">
  <!--使用变量时，先看在哪个模板里面-->
  <cpn v-show="isShow"></cpn>
  <!-- <cpn v-for="item in names"></cpn> -->
</div>

<template id="cpn">
  <div>
	<h2>我是子组件</h2>
	<p>我是内容, 哈哈哈</p>
	<!-- <button v-show="isShow">按钮</button> -->
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  /*实例*/
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
	/*组件*/
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false
          }
        }
      },
    }
  })
</script>

</body>
</html>

执行结果

1.4 作用域插槽

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

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域插槽</title>
</head>
<body>
    <!--作用域插槽: 父组件替换插槽的标签，但是内容由子组件来提供-->
    <div id="app">
      <cpn></cpn>
      <!--&lt;!&ndash;目的是获取子组件中的starts&ndash;&gt;
      <cpn>
        &lt;!&ndash;方式1&ndash;&gt;
        <template slot-scope="slot">
          <span v-for="item in slot.data">-{{item}}</span>
        </template>
      </cpn>-->

      <!--目的是获取子组件中的starts-->
      <cpn>
        <!--方式2-->
        <template slot-scope="slot"><!--引用插槽对象-->
          <span>{{slot.data.join(' - ')}}</span>
        </template>
      </cpn>
    </div>

    <!--子组件模板-->
    <template id="cpn">
      <div>
		<!--子组件传递给父组件-->
        <slot :data="starts">
          <ul>
            <li v-for="item in starts">{{item}}</li>
          </ul>
        </slot>
      </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
      // 创建对象
      const app = new Vue({
        // 挂载要管理的元素
        el: '#app',

        // 定义数据
        data: {
          message: 'hello world!'
        },
        components: {
          cpn: {
            template: '#cpn',
            data(){
              return {
                starts: ['kobe', 'Jmaes', 'Curry', 'Duncan']
              }
            }
          }
        }
      })
  </script>
</body>
</html>

执行结果

guardwhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js-插槽

10.1 为什么使用slot组件的插槽组件的插槽也是为了让封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。slot基本使用在子组件中，使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容。代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&
复制链接

扫一扫

专栏目录