How to use slots to distribute content through slots in Vue-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use slots to distribute content through slots in Vue

亚连

Jun 02, 2018 am 10:24 AM

slotaccomplishslot

This article mainly introduces the method of using slots to distribute content in Vue. Now I share it with you and give it as a reference.

tag is simply a placeholder. It will help you occupy the position. When you need it, you can directly pass in the html and it will display it for you. .

Some people also say: props can pass data from parent components to child components, and slots can pass html from parent components to child components. So how to achieve it?

Single slot:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
      <h1 id="我是父组件的标题">我是父组件的标题</h1>
      <my-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </my-component>
    </p>
    <script type="text/javascript">
      Vue.component(&#39;my-component&#39;, {
       // 有效，因为是在正确的作用域内
       template: &#39;<p>\
              <h2 id="我是子组件的标题">我是子组件的标题</h2>\
              <slot>只有在没有要分发的内容时才会显示。</slot>\
            </p>&#39;,
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

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

Write the slot tag in the template in the component, and pass in html when the parent calls the child component.

Named slot:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
      <my-component>
         <h1 id="这里可能是一个页面标题">这里可能是一个页面标题</h1>

         <p>主要内容的一个段落。</p>
         <p>另一个主要段落。</p>

         <p slot="footer">这里有一些联系信息</p>
      </my-component>
    </p>
    <script type="text/javascript">
      Vue.component(&#39;my-component&#39;, {
       // 有效，因为是在正确的作用域内
       template: &#39;<p class="container">\
             <header>\
              <slot name="header"></slot>\
             </header>\
              <main>\
              <slot></slot>\
             </main>\
             <footer>\
              <slot name="footer"></slot>\
             </footer>\
            </p>&#39;,
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

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

Named slot, as the name suggests, when there are multiple slot tags, you need to give them their own names and call them in the parent component slot="internal corresponding name" is required. When there is an unnamed slot tag, the default html code passed in by the parent component will all be output in the unnamed slot tag.

Scope slot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
       <!-- 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
       <child>
        <template scope="props">
         <span>hello from parent</span><br>
         <span>{{ props.text }}</span>
        </template>
      </child>
    </p>
    <script type="text/javascript">
      // 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
      Vue.component(&#39;child&#39;,{
        template:&#39;<ul>&#39; +
              &#39;<slot text="hello from child"></slot>&#39; +
             &#39;</ul>&#39;,
        data:function(){
         return {

         }
        },
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

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

A scope slot is a special type of slot used as a reusable template (that can be passed data), to replace already rendered elements.

In fact, it is equivalent to getting the props object passed by the child component in the parent component, and then rendering it to the parent component.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Bootstrap implements collapsible grouped side navigation menu

Vue.js Layer table data binding and implementation update Example

vue.js Example of nested loop, if judgment, dynamic deletion

The above is the detailed content of How to use slots to distribute content through slots in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The Evolution of JavaScript: Current Trends and Future ProspectsApr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Demystifying JavaScript: What It Does and Why It MattersApr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Is Python or JavaScript better?Apr 06, 2025 am 12:14 AM

Python is more suitable for data science and machine learning, while JavaScript is more suitable for front-end and full-stack development. 1. Python is known for its concise syntax and rich library ecosystem, and is suitable for data analysis and web development. 2. JavaScript is the core of front-end development. Node.js supports server-side programming and is suitable for full-stack development.

See all articles