Vue 插槽新语法

最新推荐文章于 2024-05-28 17:25:55 发布

wdapp

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量314

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/wanda000/article/details/104217992

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 插槽 新语法</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }

  .header {
    border: 1px red solid;
    margin: 10px;
  }

  .main {
    border: 1px green solid;
    margin: 10px;
  }

  .footer {
    border: 1px orange solid;
    margin: 10px;
  }
  </style>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <base-layer :key="key">
    <template v-slot:[key]>
      <p>动态插槽名</p>
    </template>
    <template v-slot:default>
      <p>默认插槽 1</p>
    </template>
    <template v-slot:main>
      <div>具名插槽</div>
    </template>
    <template v-slot:list="options">
      <li v-for="val in options.list">
        {{val}}
      </li>
    </template>
    <template #footer="{user}">
      具名插槽缩写 {{user}}
    </template>
  </base-layer>
  <default-slot v-slot="{tag: name='hello'}">
    <p>独占默认插槽的缩写法 {{name}}</p>
    <p>v-slot支持解构和任何支持函数参数的语法</p>
  </default-slot>
</div>
<script>
/**
 * 这里主要介绍了 Vue 2.6.0+ 插槽的新语法
 */
Vue.component("BaseLayer", {
  pros: {
    key: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      list: [1, 2, 3, 4],
      firstName: "科比",
      lastName: "布莱恩特",
      user: "GM"
    };
  },
  template:
    `<div>
  <div class="header">
    header
    <slot>
      后背内容
    </slot>
  </div>
  <div class="main">
    main
    <slot name="main"></slot>
    <ul>
      <slot name="list" :list="list">
      作用域插槽
      </slot>
    </ul>
    <slot name="center"></slot>
  </div>
  <div class="footer">
    footer
    <slot name="footer" :user="user"></slot>
  </div>
</div>`
});
Vue.component("DefaultSlot", {
  data() {
    return {
      tag: "DefaultSlot"
    };
  },
  template:
    `<div>
      <slot :tag="tag"></slot>
    </div>`,

});
var app = new Vue({
  el: "#app",
  data: {
    message: "插槽作用域",
    key: "center"
  },
  methods: {}
});

</script>
</body>
</html>

wdapp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 插槽新语法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 插槽新语法</title> <style> * { margin: 0; padding: 0; } .header {...
复制链接

扫一扫

专栏目录

Vue 插槽 新语法

Vue 插槽新语法