Vue content distribution slot-JS Tutorial-php.cn

Table of Contents

When the child component template has only one slot without attributes, the entire content fragment of the parent component will be inserted into the DOM location where the slot is located, and the slot tag itself will be replaced

element can use a special attribute

作用域插槽

Home

Web Front-end

JS Tutorial

Vue content distribution slot

大家讲道理

Aug 19, 2017 am 10:13 AM

slot content distribution

Previous words

In order for components to be composed, a way is needed to mix the content of the parent component with the child component's own template. This process is called Content Distribution (or "transclusion"). Vue implements a content distribution API, referring to the current draft web component specification, using the special <slot> element as the slot for the original content. This article will introduce in detail the Vue content distribution slot

Compilation scope

Before going deep into the content distribution API, first clarify in which scope the content is compiled. Assume that the template is

<child-component>
  {{ message }}
</child-component>

Copy after login

Should message be bound to the data of the parent component or to the data of the child component? The answer is parent components. Component scope simply means: the content of the parent component template is compiled in the parent component scope; the content of the child component template is compiled in the child component scope.

A common mistake is to try to bind a directive to a child component property/method within the parent component template:

1 2	`<!-- 无效 -->` `<child-component v-show="someChildProperty"></child-component>`

Copy after login

AssumptionsomeChildProperty is a property of the child component, the above example will not work as expected. The parent component template should not know the state of the child component

If you want to bind a scoped directive to the root node of a component, you should do it on the component's own template:

Vue.component('child-component', {
  // 有效，因为是在正确的作用域内
  template: '<p v-show="someChildProperty">Child</p>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

Copy after login

Similarly, distributed content is compiled in the parent scope

Discarded by default

Generally, if the child component template does not contain <slot>Socket, the content of the parent component will be discarded

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

<p id="example">
  <parent></parent></p><script src="https://unpkg.com/vue"></script><script>var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
  </p>  `,
};var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>  `,
  components: {    'child': childNode
  },
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

Copy after login

As shown in the figure below, the

test content

contained in is discarded

##Anonymous slot

When the child component template has only one slot without attributes, the entire content fragment of the parent component will be inserted into the DOM location where the slot is located, and the slot tag itself will be replaced

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
  </p>
  `,
};

Copy after login

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

## If there is more than 1 anonymous slot, vue will report an error

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
    <slot></slot>
  </p>
  `,
};

Copy after login

[Default value]

Initially in the

<slot>

tag Any content is considered

fallback content, otherwise known as the default value. Alternate content is compiled within the scope of the child component, and is displayed only when the host element is empty and there is no content to be inserted When the slot has a default value and the parent element is in When there is no content to be inserted, the default value

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child></child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

## is displayed. When the slot has a default value and the parent element is in < When there is content to be inserted in child>, the setting value is displayed

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>我是设置值</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

Named Slot

　The <slot>

element can use a special attribute

name

to configure how content is distributed. Multiple slots can have different names. Named slot will match elements in the content fragment that have the corresponding slot attribute<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var childNode = { template: ` <p class="child"> <p>子组件</p> <slot name="my-header">头部默认值</slot> <slot name="my-body">主体默认值</slot> <slot name="my-footer">尾部默认值</slot> </p> `, };</pre><div class="contentsignin">Copy after login</div></div>

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-header">我是头部</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

There can still be an anonymous slot, which is the

default slot, as a backup slot if no matching content fragment is found. Anonymous slots can only be used as slots for elements without slot attributes. Elements with slot attributes will be discarded if they are not configured with slots

<strong>var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
    <slot></slot>
  </p>
  `,
};</strong>

Copy after login

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-body">我是主体</p>
      <p>我是其他内容</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

Insert into,

I am other content

Insert into <slot>, and

is discarded

If there is no default slot, these matching content cannot be found Fragments will also be discarded

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
  </p>
  `,
};

Copy after login

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-body">我是主体</p>
      <p>我是其他内容</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

I am other content

and

are abandoned

作用域插槽

　　作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

　　在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样

1 2	`<p` `class="child">` `<slot text="hello from child"></slot></p>`

Copy after login

　　在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
      <slot xxx="hello from child"></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template scope="props">
        <p>hello from parent</p>
        <p>{{ props.xxx }}</p>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

　　如果渲染以上结果，得到的输出是

【列表组件】

　　作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项

var childNode = {
  template: `  <ul>
    <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
  </ul>
  `,
  data(){
    return{
      items:[
        {id:1,text:'第1段'},
        {id:2,text:'第2段'},
        {id:3,text:'第3段'},
      ]
    }
  }
};

Copy after login

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template slot="item" scope="props">
        <li>{{ props.text }}</li>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Copy after login

The above is the detailed content of Vue content distribution slot. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

InZoi: How To Apply To School And University

1 months ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Where to find the Site Office Key in Atomfall

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7918

Java Tutorial

1652

CakePHP Tutorial

1411

Laravel Tutorial

1303

PHP Tutorial

1248

Related knowledge

How to enable Sensitive Content Warning on iPhone and learn about its features Sep 22, 2023 pm 12:41 PM

Especially over the past decade, mobile devices have become the primary way to share content with friends and family. The easy-to-access, easy-to-use interface and ability to capture images and videos in real time make it a great choice for creating and sharing content. However, it's easy for malicious users to abuse these tools to forward unwanted, sensitive content that may not be suitable for viewing and does not require your consent. To prevent this from happening, a new feature with "Sensitive Content Warning" was introduced in iOS17. Let's take a look at it and how to use it on your iPhone. What is the new Sensitive Content Warning and how does it work? As mentioned above, Sensitive Content Warning is a new privacy and security feature designed to help prevent users from viewing sensitive content, including iPhone

How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation Mar 04, 2024 pm 01:50 PM

How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "

How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method Mar 13, 2024 pm 04:49 PM

CheatEngine is a game editor that can edit and modify the game's memory. However, its default language is non-Chinese, which is inconvenient for many friends. So how to set Chinese in CheatEngine? Today, the editor will give you a detailed introduction to how to set up Chinese in CheatEngine. I hope it can help you. Setting method one: 1. Double-click to open the software and click "edit" in the upper left corner. 2. Then click “settings” in the option list below. 3. In the opened window interface, click "languages" in the left column

Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Mar 06, 2024 am 11:49 AM

Do you know where to set the download button to display in Microsoft Edge? Below, the editor will bring you the method to set the download button to display in Microsoft Edge. I hope it will be helpful to you. Let’s follow the editor to learn it! Step 1: First open Microsoft Edge Browser, click the [...] logo in the upper right corner, as shown in the figure below. Step 2: Then click [Settings] in the pop-up menu, as shown in the figure below. Step 3: Then click [Appearance] on the left side of the interface, as shown in the figure below. Step 4: Finally, click the button on the right side of [Show Download Button] and it will change from gray to blue, as shown in the figure below. The above is where the editor brings you how to set up the download button in Microsoft Edge.

The ultimate evolution of Python applications: PyInstaller emerges from the cocoon and becomes a butterfly Feb 19, 2024 pm 03:27 PM

PyInstaller is a revolutionary tool that empowers Python applications beyond their original scripting form. By compiling Python code into standalone executable files, PyInstaller unlocks a new realm of code distribution, deployment, and maintenance. From a single script to a powerful application In the past, Python scripts only existed in a specific Python environment. Distributing such a script requires users to install Python and the necessary libraries, which is a time-consuming and cumbersome process. PyInstaller introduces the concept of packaging, combining Python code with all required dependencies into a single executable file. The Art of Code Packaging PyInstaller’s Work

Transform Python code into an independent application: the alchemy of PyInstaller Feb 19, 2024 pm 01:27 PM

PyInstaller is an open source library that allows developers to compile Python code into platform-independent self-contained executables (.exe or .app). It does this by packaging Python code, dependencies, and supporting files together to create standalone applications that can run without installing a Python interpreter. The advantage of PyInstaller is that it removes dependency on the Python environment, allowing applications to be easily distributed and deployed to end users. It also provides a builder mode that allows users to customize the application's settings, icons, resource files, and environment variables. Install PyInstal using PyInstaller to package Python code

The daily life of Ain, a traveler in space and time: permanent content update Mar 01, 2024 pm 08:37 PM

The Painted Traveler in Time and Space has been confirmed to be updated on February 29th. Players can go to the open-air music festival with Ain to gain a favorability bonus with Ain. On March 4th, the Lingering Holiday Color Time event will be launched. , players can upgrade their holiday itinerary level to unlock new text messages and Lofter content. The Daily Life of Ain, a Traveler in Time and Space: Permanent Content Update After the February 29 version, you can experience the new campus schedule [Participate in the Open Air Music Festival], and you can get a favorability bonus by participating with Ain. From 09:30 on March 4th to 05:00 on April 15th, during the "Longening Holiday·Sexy Time" event, upgrade the [Holiday Itinerary] level to level 8 and level 28 to unlock new text messages and Lofter content respectively. *New SMS and Lofter added

Analyzing Solana's DEX layout: Is Jupiter the future of ecology? Mar 26, 2024 pm 02:10 PM

Source: Shenchao TechFlow As a high-profile emerging project in the Solana ecosystem, Jupiter has quickly emerged in the DeFi field despite its short launch. However, even in such a rapidly developing environment, the improvement of economic models and the stability of token prices are still crucial. Without these supports, a project can easily fall into a vicious cycle that may ultimately lead to its decline or even its inability to sustain itself. Therefore, Jupiter needs to continuously optimize its economic design and ensure token price stability to ensure the long-term development and success of the project. The Solana chain has performed strongly in the past week, with its token SOL rising rapidly in the secondary market, and Jupiter’s token $JUP also rising in the past two weeks.

See all articles