av女优巨乳,亚洲一级黄色电影,少妇高潮zzzzzzz,一区二区操逼视频,无尽3d女同裸体,台湾三级网,骚屄视频网,美女被插逼视频

來(lái)源 |?https://xueyuanjun.com/post/21939

插槽的作用

在組件入門這篇教程中，學(xué)院君已經(jīng)給大家演示了插槽（slot）功能的基本使用，插槽的主要作用就是在組件中分發(fā)父作用域的內(nèi)容，這個(gè)父作用域可以是 Vue 全局容器（可以看作是一個(gè)全局的「根組件」），也可以是父組件。

說(shuō)到這里，我們可以引用一張 Vue 官網(wǎng)提供的組件架構(gòu)圖，實(shí)際上，一個(gè) Vue.js 應(yīng)用就是基于下面這樣的一個(gè)組件樹來(lái)組織和管理頁(yè)面元素的：

我們可以把全局 Vue 實(shí)例看作一個(gè)最頂層的隱式組件，其他組件都是通過(guò)?Vue.component?在此基礎(chǔ)上注冊(cè)，并且這些組件之間可以相互嵌套、內(nèi)容分發(fā)、數(shù)據(jù)傳遞以及事件通知來(lái)建立聯(lián)系，從而通過(guò)一個(gè)個(gè)小組件自下而上層層疊加，最終構(gòu)建出復(fù)雜的頁(yè)面布局和功能模塊。

關(guān)于組件嵌套、數(shù)據(jù)傳遞和事件通知學(xué)院君前面都已經(jīng)介紹過(guò)了，回到插槽這個(gè)主題，我們可以通過(guò)??語(yǔ)法在子組件中渲染父級(jí)作用域定義的元素，從而實(shí)現(xiàn)嵌套組件之間的內(nèi)容分發(fā)。

命名插槽

單個(gè)插槽在組件入門中已經(jīng)演示過(guò)，如果組件中定義了多個(gè)插槽，則可以通過(guò)命名插槽的方式來(lái)實(shí)現(xiàn)內(nèi)容分發(fā)，為了演示這個(gè)功能，我們?cè)?vue_learning/component?目錄下新建一個(gè)?slot.html?文檔，并編寫示例代碼如下：

<html><head>    <meta charset="UTF-8">    <title>插槽及其作用域使用示例title>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">script>    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>head><body><div id="app">        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">        模態(tài)框    button>
        <modal-example>        <template slot="header">標(biāo)題template>        主體內(nèi)容...    modal-example>div>
<script>    Vue.component('modal-example', {        template: '<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">' +            '    <div class="modal-dialog">' +            '        <div class="modal-content">' +            '            <div class="modal-header">' +            '                <h5 class="modal-title" id="exampleModalLabel"><slot name="header">slot>h5>' +            '                <button type="button" class="close" data-dismiss="modal" aria-label="Close">' +            '                    <span aria-hidden="true">×span>' +            '                button>' +            '            div>' +            '            <div class="modal-body">' +            '                <slot>slot>' +            '            div>' +            '            <div class="modal-footer">' +            '                <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>' +            '                <button type="button" class="btn btn-primary">Save changesbutton>' +            '            div>' +            '        div>' +            '    div>' +            'div>'    });    new Vue({        el: '#app'    })script>body>html>

在這段代碼中，我們引入了?Bootstrap?框架來(lái)渲染一個(gè)模態(tài)框，具體的模態(tài)框部分代碼通過(guò)?modal-example?組件來(lái)定義，在這個(gè)組件中，我們定義了兩個(gè)插槽來(lái)分發(fā)父級(jí)作用域分發(fā)的內(nèi)容，一個(gè)用于渲染模態(tài)框標(biāo)題，一個(gè)用于渲染模態(tài)框主體內(nèi)容：

<div class="modal-header">    <h5 class="modal-title" id="exampleModalLabel">        <slot name="header">slot>    h5>    <button type="button" class="close" data-dismiss="modal" aria-label="Close">        <span aria-hidden="true">×span>    button>div><div class="modal-body">    <slot>slot>div>

對(duì)應(yīng)的父級(jí)作用域中，我們通過(guò)如下代碼引入?modal-example?組件進(jìn)行渲染：

<modal-example>    <template slot="header">標(biāo)題template>    主體內(nèi)容...modal-example>

可以看到，對(duì)于組件中的命名插槽，需要通過(guò)??與之呼應(yīng)，其中?name?值就是命名插槽對(duì)應(yīng)的?name?屬性值：

<slot name="header">slot>

這樣??標(biāo)簽中對(duì)應(yīng)的內(nèi)容就會(huì)分發(fā)到對(duì)應(yīng)命名插槽中，而??標(biāo)簽中定義其他的內(nèi)容則會(huì)自動(dòng)分發(fā)到未命名的插槽中：

我們?cè)跒g覽器中預(yù)覽這個(gè) HTML 文檔，就可以看到對(duì)應(yīng)的渲染效果了：

當(dāng)然，你也可以定義多個(gè)命名插槽：

# 視圖部分<modal-example>    <template slot="header">標(biāo)題template>    <template slot="body">主體內(nèi)容...template>modal-example>
...
# 組件模板<div class="modal-header">    <h5 class="modal-title" id="exampleModalLabel">        <slot name="header">slot>    h5>    ...div><div class="modal-body">    <slot name="body">slot>div>

效果也是完全一樣的。

默認(rèn)內(nèi)容

Vue 還支持為插槽定義默認(rèn)渲染內(nèi)容，這樣，即便父級(jí)作用域沒(méi)有定義要分發(fā)的內(nèi)容，也可以通過(guò)默認(rèn)的內(nèi)容進(jìn)行渲染（如果父級(jí)作用域定義了要分發(fā)的內(nèi)容，則會(huì)覆蓋插槽中的默認(rèn)內(nèi)容）：

# 視圖部分<modal-example>
modal-example>
...
# 組件模板<div class="modal-header">    <h5 class="modal-title" id="exampleModalLabel">        <slot name="header">默認(rèn)標(biāo)題slot>    h5>    ...div><div class="modal-body">    <slot name="body">默認(rèn)內(nèi)容slot>div>

對(duì)應(yīng)的渲染效果如下：

作用域

以上內(nèi)容分發(fā)都是靜態(tài)的內(nèi)容渲染，除此之外，我們還可以在父級(jí)作用域獲取組件插槽中的動(dòng)態(tài)數(shù)據(jù)，從而通過(guò)條件過(guò)濾實(shí)現(xiàn)內(nèi)容的動(dòng)態(tài)渲染，你可以將其理解為在父級(jí)作用域引用帶有動(dòng)態(tài)數(shù)據(jù)的插槽，那如何在父級(jí)作用域中調(diào)用組件插槽中的數(shù)據(jù)呢？Vue.js 框架通過(guò)作用域插槽的機(jī)制對(duì)此提供了支持。

# HTML 視圖        
...
# 組件模板Vue.component('modal-example', {    props: ['languages'],    template: ... +         '' +         '    
' +        '    ' +        '
' +        '' +        '    {{ language }}
' +        '
' +        ...});

重點(diǎn)關(guān)注主體內(nèi)容對(duì)應(yīng)的插槽，我們?cè)诟讣?jí)作用域引用?modal-example?組件時(shí)，通過(guò) props 屬性?languages?傳入了要渲染的數(shù)據(jù)，然后在組件模板對(duì)應(yīng)的插槽中，通過(guò)如下代碼渲染傳入的數(shù)據(jù)：

                        {{ language }}

我們通過(guò)一個(gè)循環(huán)列表渲染從父級(jí)作用域傳入的?languages?數(shù)據(jù)，將每一個(gè)列表項(xiàng)通過(guò)插槽轉(zhuǎn)發(fā)給父級(jí)作用域定義渲染的內(nèi)容（這里指定了默認(rèn)的內(nèi)容，即?{{ language }}，如果父級(jí)作用域中沒(méi)有定義分發(fā)的內(nèi)容，則使用默認(rèn)內(nèi)容渲染）。

另外，我們還在?slot?標(biāo)簽上綁定了一個(gè)動(dòng)態(tài)屬性?:language，這一步不可或缺，有了這個(gè)綁定才可以在父級(jí)作用域引用插槽中的變量數(shù)據(jù)。

我們來(lái)看父級(jí)作用域中分發(fā)內(nèi)容到該插槽的示例代碼：

這里，需要通過(guò)一個(gè)未命名的?template?元素來(lái)包裹待分發(fā)內(nèi)容，然后在這個(gè)元素上設(shè)置?scope?屬性，聲明對(duì)應(yīng)的插槽作用域?yàn)?slotProps，即主體內(nèi)容部分對(duì)應(yīng)的插槽（只能訪問(wèn)該插槽綁定的數(shù)據(jù)）。

這樣一來(lái)，就可以通過(guò)?slotProps.language?訪問(wèn)綁定到該插槽上的?language?變量數(shù)據(jù)了（當(dāng)然，你還可以在插槽上綁定更多屬性，然后通過(guò)?slotProps?在父級(jí)作用域引用它們）。

在瀏覽器中預(yù)覽這個(gè)模態(tài)框，渲染效果如下：

以上就是 Vue.js 組件插槽的基本功能和使用演示。

到目前為止，我們所有的 Vue 組件都是在單個(gè) HTML 文檔中定義的，如果組件很多、模板代碼很復(fù)雜，將會(huì)導(dǎo)致代碼可讀性和可維護(hù)性很差，這里一個(gè)小小的模態(tài)框演示代碼足以窺見(jiàn)端倪。

為此，Vue.js 生態(tài)提供了 Vue Loader 來(lái)支持編寫單文件 Vue 組件，從而方便我們以更加靈活、更加現(xiàn)代的方式構(gòu)建功能強(qiáng)大的 Vue 應(yīng)用，下篇教程，學(xué)院君將給大家演示如何 Vue CLI + Vue Loader 來(lái)編寫單文件 Vue 組件，并成功在 HTML 文檔中引入和渲染。

本文完~

【Vue.js 入門到實(shí)戰(zhàn)教程】07-Vue 組件注冊(cè) | 基本使用和組件嵌套

【Vue.js 入門到實(shí)戰(zhàn)教程】06-在 Vue.js 中通過(guò)計(jì)算屬性動(dòng)態(tài)設(shè)置屬性值

国产秋霞理论久久久电影-婷婷色九月综合激情丁香-欧美在线观看乱妇视频-精品国avA久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频

【Vue.js 入門到實(shí)戰(zhàn)教程】09-Vue 組件插槽 | 父子組件間的內(nèi)容分發(fā)和插槽作用域

插槽的作用

命名插槽

默認(rèn)內(nèi)容

作用域