Vue 插槽废弃语法

最新推荐文章于 2022-06-30 17:13:18 发布

wdapp

最新推荐文章于 2022-06-30 17:13:18 发布

阅读量428

点赞数

分类专栏： vue.js Vue

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

版权

Vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue.js

5 篇文章 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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<template id="tmp">
  <h1 id="h1">template h1</h1>
</template>
<div id="app">
  <base-layer>
    <p slot-scope="options">
      {{message}}
      {{options.first}}
      {{options.last}}
      {{options.value}}
      {{options}}
    </p>

    <h3 slot="main">具名插槽</h3>
    <template slot="footer">
      <p>p footer</p>
      <p>span footer</p>
    </template>
    <template slot="list" slot-scope="{item}">
      <li>
        {{item}}
      </li>
    </template>
    <template slot="lists" slot-scope="opts">
      <li v-for="item in opts.lists">
        {{item + ' lists'}}
      </li>
    </template>
  </base-layer>
</div>
<script>
/**
 * 这里主要介绍了 Vue 插槽的废弃写法
 * slot-scope 作用域插槽，能够让插槽内容，访问子组件中的数据，slot上绑定的数据。（已经废弃）
 * 2.6.0 插槽引入了新写法 v-slot 统一了 slot、slot-scope
 */
Vue.component("BaseLayer", {
  data() {
    return {
      list: [1, 2, 3, 4],
      firstName: "科比",
      lastName: "布莱恩特",
    };
  },
  template:
    `<div>
<div class="header">
header
  <slot :first="firstName" :last="lastName" value="24">
    默认插槽
  </slot>
</div>
<div class="main">
main
<slot name="main"></slot>
</div>
<div class="footer">
footer
<slot name="footer"></slot>
<ul>
  <slot name="list" :item="item" v-for="item in list"></slot>
  <slot name="lists" :lists="list"></slot>
</ul>
</div>
</div>`
});
var app = new Vue({
  el: "#app",
  data: {
    message: "插槽作用域"
  },
  methods: {}
});

var tmp = document.getElementById("tmp");
console.log(tmp.content);
</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 {...
复制链接

扫一扫