【Vue基礎知識總結 8】插槽slot與vue匯入匯出-有解無憂

🍅 Java學習路線：搬磚工逆襲Java架構師

🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪

🍅 掃描主頁左側二維碼，加入群聊，一起學習、一起進步

🍅 歡迎點贊 👍 收藏 ?留言 📝

一、插槽slot

二、插槽代碼實體

三、具名插槽的使用

四、作用域

五、作用域插槽

六、前端代碼復雜帶來的問題

1、js腳本語言

2、前后端分離開發

3、匿名函式的解決方案

4、常見的模塊化規范

七、CommonJS

1、CommonJS匯出

2、CommonJS匯入

八、ES6匯入匯出

1、index.html

2、aaa.js

3、bbb.js

4、mmm.js

送書啦！！！

【圖書簡介】

【內容簡介】

【作者簡介】

一、插槽slot

插槽slot會使代碼更有擴展性；

插槽slot也就是預留一些空間；

如何封裝京東標頭類似的組件呢？

它們有很多區別，但是有很多共性；
如果每一個單獨封裝一個組件，顯然不合適，比如每個頁面都回傳，這部分內容我們就要重復去封裝；
但是，如果我們封裝成一個，好像也不合理，有些左側是選單，有些是回傳，有些中間是搜索，有些是文字等等，

如何封裝合適呢？

抽取共性，保留不同，不同的地方使用插槽slot，

最好的封裝方式就是將共性抽取到組件中，將不同暴露為插槽；
一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中輸入的內容；
是搜索框，還是文字，還是選單，由呼叫者自己決定；

二、插槽代碼實體

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--
1.插槽的基本使用 <slot></slot>
2.插槽的默認值 <slot>button</slot>
3.如果有多個值, 同時放入到組件進行替換時, 一起作為替換元素
-->

<div id="app">
  <cpn></cpn>

  <cpn><span>哈哈哈</span></cpn>
  <cpn><i>呵呵呵</i></cpn>
  <cpn>
    <i>呵呵呵</i>
    <div>我是div元素</div>
    <p>我是p元素</p>
  </cpn>

  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是組件</h2>
    <p>我是組件, 哈哈哈</p>
    <slot><button>按鈕</button></slot>
    <!--<button>按鈕</button>-->
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

</body>
</html>

瀏覽器顯示

三、具名插槽的使用

具名插槽的含義就是可以分別替換指定的插槽，也就是給插槽命名，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn><span slot="center">標題</span></cpn>
  <cpn><button slot="left">回傳</button></cpn>
</div>


<template id="cpn">
  <div>
    <slot name="left"><span>左邊</span></slot>
    <slot name="center"><span>中間</span></slot>
    <slot name="right"><span>右邊</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

</body>
</html>

瀏覽器顯示

四、作用域

父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
    <!--這個isShow的作用域是div實體，所以它是true-->
  <cpn v-show="isShow"></cpn>
  <cpn v-for="item in names"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是子組件</h2>
    <p>我是內容, 哈哈哈</p>
    <!--這個的作用域是子組件，所以按鈕不顯示-->
    <button v-show="isShow">按鈕</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false
          }
        }
      },
    }
  })
</script>

</body>
</html>

瀏覽器顯示

五、作用域插槽

父組件替換插槽的標簽，但是內容由子組件來提供，

1、代碼實體

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>

  <cpn>
    <!--目的是獲取子組件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data"> - {{item}}</span>-->
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>

  <cpn>
    <!--目的是獲取子組件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data">{{item}} * </span>-->
      <span>{{slot.data.join(' * ')}}</span>
    </template>
  </cpn>
  <!--<cpn></cpn>-->
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }
      }
    }
  })
</script>


</body>
</html>

2、瀏覽器顯示

六、前端代碼復雜帶來的問題

1、js腳本語言

在網頁開發的早期，js只作為一種腳本語言，做一些簡單的表單驗證或影片實作等，那個時候代碼還是很少的，

2、前后端分離開發

隨著Ajax異步請求的出現，慢慢形成了前后端分離開發

客戶端需要完成的事情越來越多，代碼量與日俱增；

為了應對代碼量的劇增，通常會將代碼組織在多個js檔案中；

但是這種維護方式，依然不能避免一些災難性的問題；

比如全域變數同名的問題，

這種代碼的撰寫方式對js檔案的依賴順序幾乎是強制性的，

但是js檔案過多，比如幾十個的時候，弄清楚他們的順序是一件比較困難的事情；

而且即使你弄清楚了，也不能避免上面出現的這種問題的發生，

3、匿名函式的解決方案

我們可以使用匿名函式來解決重名的問題

(function(){
    var flag = true
})()

但是如果我們希望在其他js中使用flag，應該如何處理？

很顯然，在其他js中不容易使用，因為flag是一個區域變數，

此時，我們可以將需要暴露到外面的變數，使用一個模塊作為出口，

在匿名函式內部，定義一個物件；
給物件添加各種需要暴露到外面的屬性和方法；
最后將這個物件回傳，并且在外面使用了一個ModuleA接收，

var ModuleA = (function(){
    //定義一個物件
    var obj = {}
    //在物件內部添加變數和方法
    obj.flag = true
    obj.myFunc = function(info){
        console.log(info)
    }
    //將物件回傳
    return obj
})()

if(moduleA.flag){
    console.log("哪吒是一個博客專家")
}

moduleA.myFunc("哪吒是一個全堆疊工程師")

4、常見的模塊化規范

CommonJS、AMD、CMD、ES的Modules

七、CommonJS

模塊化的兩大核心：匯入和匯出

1、CommonJS匯出

module.exports = {
    flag: true,
    test(a,b){
        return a + b
    }
    demo(a,b){
        return a * b 
    }
}

2、CommonJS匯入

//CommonJS模塊
let { test,demo,flag} = require('moduleA')

//等同于
let _mA = require('moduleA')
let test = _mA.test
let demo= _mA.demo
let flag = _mA.flag

八、ES6匯入匯出

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>

2、aaa.js

var name = '小明'
var age = 18
var flag = true

function sum(num1, num2) {
  return num1 + num2
}

if (flag) {
  console.log(sum(20, 30));
}

// 1.匯出方式一:
export {
  flag, sum
}

// 2.匯出方式二:
export var num1 = 1000;
export var height = 1.88


// 3.匯出函式/類
export function mul(num1, num2) {
  return num1 * num2
}

export class Person {
  run() {
    console.log('在奔跑');
  }
}

3、bbb.js

import {sum} from './aaa.js'

var name = '小紅'
var flag = false

console.log(sum(100, 200));

4、mmm.js

// 1.匯入的{}中定義的變數
import {flag, sum} from "./aaa.js";

if (flag) {
  console.log('小明是天才, 哈哈哈');
  console.log(sum(20, 30));
}

// 2.直接匯入export定義的變數
import {num1, height} from "./aaa.js";

console.log(num1);
console.log(height);

// 3.匯入 export的function/class
import {mul, Person} from "./aaa.js";

console.log(mul(30, 50));

const p = new Person();
p.run()

// 4.匯入 export default中的內容
import addr from "./aaa.js";

addr('你好啊');

// 5.統一全部匯入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";

import * as aaa from './aaa.js'

console.log(aaa.flag);
console.log(aaa.height);

🍅 Java學習路線：搬磚工逆襲Java架構師

🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪

🍅 掃描主頁左側二維碼，加入群聊，一起學習、一起進步

🍅 歡迎點贊 👍 收藏 ?留言 📝

往期精彩回顧

【Vue基礎知識總結 1】Vue入門

【Vue知識體系總結 2】Vue動態系結v-bind

【Vue知識體系總結 3】Vue常用標簽

【Vue知識體系總結 4】Vue組件化開發

【Vue基礎知識總結 5】Vue實作樹形結構

【Vue基礎知識總結 6】Spring Boot + Vue 全堆疊開發，都需要哪些前端知識？

【Vue基礎知識總結 7】結合雙向系結理解父子組件

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/305191.html

標籤：java

上一篇：陣列的定義、宣告、初始化、遍歷、冒泡排序

下一篇：Java基礎到就業！專案加面試！之Redis面試大全！傾心整理【建議收藏】