Vue 插槽废弃语法

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

wdapp

457人浏览 · 2020-02-08 00:50:08

wdapp · 2020-02-08 00:50:08 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^