vue的slot插槽

下面是slot使用方式,占坑是在子组件中,而填坑是在父组件

在子组件中占坑的方式:

 <slot name="footer"></slot>

   其中name:代表这个“坑”的名称(是slot的一个特殊的特性,代表标识),这个子组件中这两个,可以不全显示,也可以只显示一个,通过父组件来控制

子组件中:

<template>
<div>
  <slot name="footer"></slot>
  <slot name="header"></slot>
</div>
</template>

那么父组件中如何给对应的坑赋予某种功能?

利用 slot 另一种特性的用法: 直接用在一个普通的元素上

 

如:

 <p slot="footer">hello world</p>

  其中slot:代表这个标签内容是插槽的内容, footer:在子组件中你定义的“坑”的名称

可以给不同的“坑”定义不同的样式,标签结构以及布局等

父组件:

<template>
  <div>
    <HelloWorld>
      <p slot="footer" class="Success" v-show="flat">Here's some contact info</p>
      <p slot="header" class="Warning" v-show="flat2">123456</p>
    </HelloWorld>
    <button @click="handleClick1()">{{text1}}</button>
    <button @click="handleClick2()">{{text2}}</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  },
  data() {
    return {
      text1: "显示插槽1",
      text2: "显示插槽2",
      flat: false,
      flat2: false
    };
  },
  methods: {
    handleClick1() {
      if (!this.flat) {
        this.flat = true;
      } else {
        this.flat = false;
      }
    },
    handleClick2() {
      if (!this.flat2) {
        this.flat2 = true;
      } else {
        this.flat2 = false;
      }
    }
  }
};
</script>

<style>
.Success {
  font-size: 26px;
  color: green;
}

.Warning {
  font-size: 54px;
  color: firebrick;
}

.Error {
  font-size: 32px;
  color: red;
}
</style>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值