Vue 之 Slot

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/smalCat/article/details/86140202

slot在vue中称之为插槽
展示:
       没有使用slot

       使用slot

理解：
       在组件中，使用

<slot> </slot>

       标签进行占位，如下代码
子组件中的templat

<template>
  <div class="div">
    <slot name='test'>
    
    </slot>
    <span>
      这个是常规内容第一项
    </span>
    <slot name='ee'>
     
    </slot>
    <span>
      这个是常规内容
    </span>
  </div>
</template>

这里我使用了两个slot标签占位，而且还是具名插槽 占了页面中的两个位置

作用：
       插槽位置将会展现我从父组件传过来的demo

在我没传demo之前，父组件是这样
HTML

<template>
  <div class="hello">
    <Sllot >
    </Sllot>
    <h1>{{ msg }}</h1>
  </div>
</template>

js

<script>
import Sllot from './sllot'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    Sllot
  }
}

页面

开始在父组件中传入demo, 在子组件插槽位置显示
HTML

<template>
  <div class="hello">
    <Sllot >
      <h1 slot='ee'>不好，真的不好</h1> // 这内容将会在 name=ee 的slot位置展示
      <h6 slot='test'>不sdfsdf好，真的不好</h6> 这内容将会在 name=test 的slot位置展示
    </Sllot>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

js没有变动，就不上了

页面开始变化了

我在子组件Sllot中传入的demo分别展示在之前我写的slot（插槽）位置

所以插槽可以让我们更好的布局。

它的作用对于在页面局部更改样式非常有效

2.6 之 solt新使用方法（动态绑定）

最近Vue发布了2.6 ，其中对slot有了新用法

// 我这里直接开始用组件说明

 // 一个组件
//  数据
data () {
	return {
		params: {
			name: '雨生'，
			age: '18'
		}
	}
}
// ,默认形式
 <Hi slot:'{params}'>
	 <template>
	 	{{params.name}}
 		{{params.age}}
 	</template>
 </Hi>
// 具名形式,test是组件中slot标签的name值，p标签是我们要填入的内容，
 <Hi slot:'test'>
 	<template>
 		<p>sdfsdfasdfasdfasfasf</p>
	 </tempalte>
 </Hi>

相差：
1、slot改为动态指令式 如：slot：test 而这个test可以动态变更，也就是说slot标签的那么是可以动态变更的
2、slot 支持了参数，如：slot：{{params}}，可以直接动态变更显示内容