Vue 插槽 廢棄語法

wdapp發表於2020-02-07
Vue
<!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>

複製程式碼

相關文章