SoFunction
Updated on 2025-04-11

Detailed explanation of the sample code for creating head components in Vue

Components

Component is one of the most powerful features.

Components can extend HTML elements and encapsulate reusable code.

The specific code is as follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="/npm/[email protected]/dist/"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none
    }
    body {
      height: 2000px;
      overflow: hidden;
    }
    .header {
      width: 100%;
      height: 40px;
      background: #e1e1e1;
      text-align: center;
      line-height: 40px;
      position: fixed;
    }
    .header button {
      padding: 0rem 0.2rem;
      height: 40px;
      top: 0;
    }
    .header button:nth-of-type(1) {
      position: fixed;
      left: 0;
    }
    .header button:nth-of-type(2) {
      position: fixed;
      right: 0;
    }
  </style>
</head>
<body>
  <div >
    <custom-header :title="title">
      <button slot="left">return</button>
    </custom-header>
  </div>
  <template >
    <div class="header">
      <slot name="left"></slot>
      <span>{{title}}</span>
      <slot name="right"></slot>
    </div>
  </template>
  <script>
    ("custom-header", {
      template: '#header',
      props: ["title"]
    });
    //For multi-slot use, use the name attribute to specify the location to be inserted    var vm = new Vue({
      el: '#app',
      data: {
        title: "Address Book"
      },
      components: {
      }
    });
  </script>
</body>
</html>

Summarize

The above is a detailed explanation of the sample code for creating head components of Vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!