欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue-slot插槽的所有使用方法

程序员文章站 2022-06-22 11:47:26
1.插槽的基本使用
//定义一个组件const vm = new Vue({ el: '#app', //注册...

1.插槽的基本使用

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

//定义一个组件
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是内容</p>
    <slot></slot>
  </div>
</template>
const vm = new Vue({
  el: '#app',
  //注册组件
  components: {
    cpn: {
      template: '#cpn'
    }
  }

});

Vue-slot插槽的所有使用方法

2.插槽的默认值

<div id="app">
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是内容</p>
    <slot><span>我是默认值</span></slot>
  </div>
</template>
const vm = new Vue({
  el: '#app',
    components: {
        cpn: {
          template: '#cpn'
        }
    }
});        

Vue-slot插槽的所有使用方法

3.多个值同时放入到组件进行替换时,一起作为替换元素

<div id="app">
  <cpn>
    <p>替换1</p>
    <i>替换2</i>
  </cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是内容</p>
    <slot><button>按钮</button></slot>
  </div>
</template>
const vm = new Vue({
  el: '#app',
      components: {
        cpn: {
          template: '#cpn'
        }
    }
});                      

Vue-slot插槽的所有使用方法

4.具名插槽的使用

通过给插槽设置name属性准确找到需要替换的插槽

  <div id="app">
    <cpn><span slot="center">标题</span></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>
      const vm = new Vue({
          el: '#app',
	    components: {
	      cpn: {
	        template: '#cpn'
	      }
            }
      });

Vue-slot插槽的所有使用方法

5.作用域插槽

在父组件中无法访问到子组件中的数据,需要展示的数据还是子组件中的数据,但是展示的方式不同;通过设置slot-scope属性可以获取到子组件模板插槽中绑定的数据。

<div id="app">
    <cpn>
      <!-- 获取子组件中的数据 -->
      <!-- vue2.5.x版本以下必须用template包裹 版本以上用div也可以 -->
      <div slot-scope="slot">
        <span v-for="item in slot.num">{{item}}- </span>
      </div>
    </cpn>
</div>

<template id="cpn">
    <div>
      <slot :num="numArr">
        <ul>
          <li v-for="item in numArr">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>

const vm = new Vue({
      el: '#app',
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              numArr: [1,2,3,4,5,6,7]
            }
          }
        }
      }
 });

Vue-slot插槽的所有使用方法

本文地址:https://blog.csdn.net/qq_43447509/article/details/107518313