天天看點
傳回

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

Vue元件化編碼

  • ​​一、使用Vue-cli建立項目​​
  • ​​1.1 說明​​
  • ​​1.2 建立Vue項目​​
  • ​​1.2.1 如何修改端口以及自動運作​​
  • ​​1.3 Vue-cli建立的項目的目錄結構​​
  • ​​1.4 元件如何定義和使用​​
  • ​​1.4.1 元件定義​​
  • ​​1.4.2 使用元件​​
  • ​​1.5 入口函數main.js​​
  • ​​二、項目打包與釋出​​
  • ​​2.1 打包​​
  • ​​2.2 釋出1：使用靜态伺服器工具包​​
  • ​​2.3 釋出2：使用動态的web伺服器tomcat​​
  • ​​三、Vue案例-評論室​​
  • ​​3.1 初始化顯示​​
  • ​​3.1.1 Add_Comments.vue​​
  • ​​3.1.2 Comments_List.vue​​
  • ​​3.1.3 List_Item.vue​​
  • ​​3.1.4 App.vue​​
  • ​​3.1.5 main.js​​
  • ​​3.1.6 小結​​
  • ​​3.2 動态的加載資料​​
  • ​​3.2.1 元件間如何通信​​
  • ​​3.2 互動添加​​
  • ​​3.3 互動删除​​
  • ​​四、Vue案例-任務清單​​
  • ​​4.1 資料動态顯示​​
  • ​​4.2 滑動顯示效果​​
  • ​​4.3 如何緩存資料​​
  • ​​4.4 如何實作​​
  • ​​五、消息訂閱釋出​​
  • ​​5.1 訂閱消息​​
  • ​​5.2 釋出消息​​
  • ​​5.3 使用​​
  • ​​5.3 注意事項​​

一、使用Vue-cli建立項目

1.1 說明

  1. vue-cli是vue官方提供的

1.2 建立Vue項目

  1. npm install -g vue-cli
  2. vue init webpack vue_demo：
  3. cd vue_demo
  4. npm install
  5. npm run dev
  6. 通路：http://localhost:8080/
【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

如果出現安裝慢，可以去看我的另一篇文章。

​​​npm install 安裝滿，怎麼解決​​

1.2.1 如何修改端口以及自動運作

在config目錄下，找到index.js檔案，如下圖，重新開機項目。

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

1.3 Vue-cli建立的項目的目錄結構

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構
|-- build                            // 項目建構(webpack)相關代碼
|   |-- build.js                     // 生産環境建構代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- utils.js                     // 建構工具相關
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置,建構開發本地伺服器
|   |-- webpack.prod.conf.js         // webpack生産環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生産環境變量
|-- src                              // 源碼目錄
|   |-- components                   // vue公共元件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 頁面入口檔案
|   |-- main.js                      // 程式入口檔案，加載各種公共元件
|-- static                           // 靜态檔案，比如一些圖檔，json資料等
|-- .babelrc                         // ES6文法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .eslintignore          // eslint文法忽略的配置
|-- .gitignore                       // git上傳需要忽略的檔案格式
|-- .postcsssrc                      // postcss配置檔案
|-- README.md                        // 項目說明
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本資訊,包依賴資訊等

❓什麼是元件🔥🔥🔥

元件是Vue中的一個重要概念，是一個可以重複使用的Vue執行個體，它擁有獨一無二的元件名稱，它可以擴充HTML元素，以元件名稱的方式作為自定義的

HTML标簽。

元件：​

​把一些公共的子產品抽取出來，然後寫成單獨的的工具元件或者頁面，在需要的頁面中就直接引入即可。那麼我們可以将其抽出為一個元件進行複用。​

 ​

1.4 元件如何定義和使用

1.4.1 元件定義

一般會先建立一個components元件目錄，在這個檔案目錄裡面寫所需要定義的元件

這裡我先定義一個HellWorld的元件

<template>
  <div>
    <p class="msg">{{msg}}</p> <!--這裡的公共功能暫時是一個顯示一條資料，msg-->
  </div>
</template>

<script>/*向外預設暴露一個配置對象*/
  export default {
    name: "HelloWorld",
    data(){ // 注意這裡的data隻能用函數來外暴露，不能使用對象的方式
      return{
        msg:"你好 Components Hello World" // 定義了一個data為msg，用于vue來動态綁定
      }
    }
  }</script>

<style scoped>.msg{
    color: yellowgreen;
    font-size: 24px;
  }</style>
​

​這裡的data隻能使用函數來向外暴露使用，否則不起效。​

 ​

1.4.2 使用元件

在使用元件的時候，我們需要有三個步驟

  1. 引入元件
  2. 映射元件标簽
  3. 使用元件标簽 
<!--模闆 -模闆必須要有一個根标簽-->
<template>
  <div>
    <img src="./assets/logo.png" alt="logo" class="logo">
    <!--3、使用HelloWorld元件标簽-->
    <HelloWorld></HelloWorld>
  </div>
</template>
<!--js-->
<script>/*1、引入元件HelloWorld*/
  import HelloWorld from "./components/HelloWorld";
  export default {
    name: "App.vue",
    /*2、映射元件helloWorld标簽*/
    components: {HelloWorld}
  }</script>
<!--css樣式 這裡可以定義，除元件之外的模闆的樣式 -->
<style scoped>.logo{
    width: 200px;
    height: 200px;
    border: 1px solid seagreen;
  }</style>

1.5 入口函數main.js 

/*
* 入口js 1、建立Vue.js
* */
import Vue from 'vue' // 引入Vue
// 1、引入元件
import App from "./App.vue"; // 引入App.vue

// 建立Vue執行個體對象
new Vue({
  el:"#app",
  // 2、映射元件标簽
  components:{
    App
  },
  // 3、使用元件标簽
  template:'<App/>'
})
【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構
【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

二、項目打包與釋出

2.1 打包 

npm

2.2 釋出1：使用靜态伺服器工具包 

npm install

通路http://localhost:端口

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

2.3 釋出2：使用動态的web伺服器tomcat

修改配置：webpack.prod.conf.js

output:{
  publicPath:'/xxx/'  // 項目檔案夾的名稱
}

重新打包：

npm

修改dist檔案夾為項目名稱：xxx

将xxx拷貝到運作的tomcat的webapps目錄下

三、Vue案例-評論室

但我們拿到一個頁面的時候，Vue的思想就是元件化的開發，那麼我們就必須要将一個也面劃分為幾個可以重複使用的​

​元件​

​，比如如下的劃分：

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

3.1 初始化顯示

根據上面的分析，我們先将頁面拆分成三個元件，并将整個view視圖分為一個App的容器包裹。容器内部分為左邊的添加區域；右邊的評論清單。

是以，綜上—>：

  1. 我們建立三個名為​

    ​Add_Comments.vue​

     ​​、​

    ​Comments_List.vue​

     ​​、​

    ​List_item.vue​

     ​的三個元件，
  2. 并将​

    ​Add_Comments.vue​

     ​​和​

    ​Comments_List.vue​

     ​​作為元件添加到​

    ​App.vue​

     ​裡，
  3. 最後，将​

    ​main.js​

     ​​的入口檔案中，使得​

    ​App.vue​

     ​作為一個标簽元件去顯示到頁面上。
    4. 【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

3.1.1 Add_Comments.vue 

<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>使用者名</label>
        <input type="text" class="form-control" v-model="name" placeholder="使用者名">
      </div>
      <div class="form-group">
        <label>評論内容</label>
        <textarea class="form-control" rows="6" v-model="content" placeholder="評論内容"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right">送出</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>export default {
    name: "Add_Comments",
  }</script>

3.1.2 Comments_List.vue 

<template>
  <div class="col-md-8">
    <h3 class="reply">評論回複：</h3>
    <h2 v-show="comments.length<=0">暫無評論，點選左側添加評論！！！</h2>
    <ul class="list-group">
      <List_Item/>
    </ul>
  </div>
</template>

<script>import List_Item from "./List_Item";

  export default {
    name: "Comments_List",
    components: {
      List_Item
    },</script>

<style scoped>.reply {
    margin-top: 0px;
  }</style>

3.1.3 List_Item.vue 

<template>
  <div>
    <li class="list-group-item">
      <div class="handle">
        <a href="javascript:;">删除</a>
      </div>
      <p class="user"><span>Rose</span><span>說:</span></p>
      <p class="centence">很好</p>
    </li>
  </div>
</template>

<script>export default {
    name: "List_Item",
  }</script>

<style scoped>li {
    transition: .5s;
    overflow: hidden;
  }

  .handle {
    width: 40px;
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;
    right: 10px;
    top: 1px;
    text-align: center;
  }

  .handle a {
    display: block;
    text-decoration: none;
  }

  .list-group-item .centence {
    padding: 0px 50px;
  }

  .user {
    font-size: 22px;
  }</style>

3.1.4 App.vue 

<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>請發表對Vue的評論</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add_Comments :addComment="addComment"></Add_Comments>
      <Comments_List :comments="comments" :delItem="delItem"></Comments_List>
    </div>
  </div>
</template>

<script>import Add_Comments from "./components/Add_Comments";
  import Comments_List from "./components/Comments_List";

  export default {
    name: "App",
    methods: {},
    data() { // 測試資料
      return {
        comments: [ // 操作在那個元件 更新元件的那個行為（方法，函數）就在那個元件裡
          {
            name: 'Rose',
            content: 'Vue 還不錯偶！！'
          },
          {
            name: 'Jack',
            content: 'yes,果然還不錯'
          },
          {
            name: 'Robby',
            content: '尤雨溪YYDS'
          }
        ]
      }
    },
    components: {
      Add_Comments,
      Comments_List
    }
  }</script>

3.1.5 main.js 

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
})

3.1.6 小結

vue的元件化開發可以将一個項目所有公共的子產品抽取，​

​這樣就很大程度上降低了代碼備援度，提高了開發效率。​

​​是以，我們在剛開始學習Vue的時候，遇到一個大的頁面可以先分析将其劃分成小的功能子產品，然後​

​分子產品​

​的去開發。

3.2 動态的加載資料

首先這裡我們可以現在App.vue裡面模拟一些資料。

思考一個問題？​

​我們在那個子產品裡面寫公共的資料​

​​

分析： 這些資料哪些子產品裡要使用？1、Add_Comments；2、Comments_List要使用

結論： ​

​既然兩個子子產品都需要用到這些模拟資料，那麼我們就将資料定義到App.vue裡面​

 ​ 
data() {
     return {
       comments: [ // 操作在那個元件 更新元件的那個行為（方法，函數）就在那個元件裡
         {
           name: 'Rose',
           content: 'Vue 還不錯偶！！'
         },
         {
           name: 'Jack',
           content: 'yes,果然還不錯'
         },
         {
           name: 'Robby',
           content: '尤雨溪YYDS'
         }
       ]
     }
   },

3.2.1 元件間如何通信

模拟完資料之後，接下來要做的就是如何将這些模拟資料在子子產品中使用❓

vue的子產品間通訊方式有很多種，這裡我就使用 ​

​props/ $emit(父子間傳遞常用方式)​

​​

1、首先，我們現在App.vue裡面的元件标簽上使用資料綁定指令v-bind來将這些模拟資料傳輸給子元件。

<Comments_List :comments="comments"></Comments_List>

2、Comments_List.vue子元件中使用 ​

​props​

​來對傳輸過來的資料進行聲明綁定

export default {
    name: "Comments_List",
    components: {
      List_Item
    },
    // 這種方式隻指定屬性名 聲明接收屬性：props
    props: ['comments']
  }

3、聲明完屬性之後，我們就需要使用資料–周遊數組中的資料

<ul class="list-group">
      <List_Item v-for="(comment,index) in comments" :key="index" :index="index" :comment="comment"/>
    </ul>

4、Comments_List元件将comments數組中的每一個對象周遊出來後，将每一個comment作為一個資料，向他的子元件List_Item傳遞，

export default {
    name: "List_Item",
    // 這種方式指定屬性名和屬性值
    props: {
      comment: Object,
    }
 }
說明：​

​props官網說明​

 ​​
【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

// 簡單文法Vue.component('props-demo-simple', {

props: ['size', 'myMessage']

})

// 對象文法，提供驗證

Vue.component('props-demo-advanced', {

props: {

// 檢測類型

height: Number,

// 檢測類型 + 其他驗證

age: {

type: Number,

default: 0,

required: true,

validator: function (value) {

return value >= 0

}

}

}

})

使用玩上面的定義後，我們就可以在html标簽中利用Vue的插值文法去擷取具體的Comments數組中的值了，如下所示：

<p class="user"><span>{{comment.name}}</span><span>說:</span></p>
<p class="centence">{{comment.content}}</p>

3.2 互動添加

完成完上面的資料的動态綁定之後，我們做的就是有互動效果

【互動添加評論資訊】

1、給按鈕綁定點選事件

<button type="button" class="btn btn-default pull-right" @click="add">送出</button>

2、添加事件函數

​

​這時候，我們就需要思考了？​

 ​ 添加資料的步驟是什麼？
  1. 校驗表單輸入的資料的合法性
  2. 封裝表單資料為一個coment對象
  3. 将comment對象添加到App.vue裡定義的Comments數組對象中
​

​操作在那個元件 更新元件的那個行為（方法，函數）就在那個元件​

 ​，而我們需要操作的Comments正好在App.vue元件中，是以，我們将添加的函數放到App.vue裡面 
export default {
    name: "App",
    methods: {
      // 添加評論方法
      addComment(comment){
        // 添加到數組的前面
        this.comments.unshift(comment)
      }
    }
  }

定義完方法之後，我們同理也是必須要向Add_Comments暴露

<Add_Comments :addComment="addComment"></Add_Comments>

3、接收都元件傳遞的資料并使用

export default {
    name: "Add_Comments",
    // 接受傳遞過來的 addComment方法
    props: {
      addComment: { // 制定了屬性名 、屬性值的類型、必要性（預設值，驗證方法）
        type: Function, // (String,Number,Boolean,Function,Object,Array,Symbol)原生構造器
        required: true
      }
    },
    data() {
      return {
        name: '',
        content: ''
      }
    },
    methods: {
      add() {
        // 1、檢查輸入的合法性
        const name = this.name;
        const content = this.content.trim();
        if (!name || !content) {
          alert("姓名或者内容不能為空")
          return;
        }
        // 2、根據輸入的資料，封裝成一個comment對象
        const comment = {
          name,
          content
        }
        // 3、添加到comments中 comments在app元件中 操作在那個元件 更新元件的那個行為（方法，函數）就在那個元件
        this.addComment(comment)
        // 4、清除輸入框中的内容
        this.name = "";
        this.content = "";
      }
    }
  }
</script>

3.3 互動删除

互動添加做完之後，我們的互動删除操作也是同樣的道理，隻不過的是，互動删除需要用到兩次的傳遞，​

​App.vue--->Comments_List--->List_Item​

​

這裡隻給出最終的List_Item的核心代碼

<script>
  export default {
    name: "List_Item",
    // 這種方式指定屬性名和屬性值
    props: {
      comment: Object,
      deleteItem: Function,
      index: Number
    },
    methods: {
      delItem() {
        const {comment,index,deleteItem} = this
        if (confirm(`确認删除${comment.name}的評論麼？`)) {
          deleteItem(index)
        }
      }
    }
  }
</script>

四、Vue案例-任務清單

老規矩，先拆分頁面

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

一樣的三步走

4.1 資料動态顯示

App.vue裡面模拟資料

export default {
    name: "App",
    data() {
      return {
        todos: [
          {
            title: '背單詞50個',
            complete: false
          },
          {
            title: '學習Vue2.x',
            complete: true
          },
          {
            title: '好好幹飯',
            complete: false
          },
        ]
      }
    },
    components: {
      Todo_Oper,
      Todo_List,
      Todo_Input
    },
  }
</script>

向外暴露給Todo_List和Todo_Oper元件中

<Todo_List :todos="todos"></Todo_List>
<Todo_Oper :todos="todos"></Todo_Oper>

子元件進行資料的處理渲染到頁面

<ul class="todo-main">
      <Todo_Item v-for="(todo,index) in todos" :key="index" :todo="todo" :index="index" :deleteTodo="deleteTodo"></Todo_Item>
</ul>      
<li>
    <label>
      <input type="checkbox"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger">删除</button>
 </li>

4.2 滑動顯示效果

顯示玩資料之後，後續的操作和案例一十分類似，這裡省略，

這裡主要記錄不同的代碼，先看效果圖：

【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

要完成這個效果，我們首先要思考幾個問題？先這種滑鼠劃過和移除時的事件是什麼?

1️⃣questionOne:如何是實作滑鼠滑過切換效果

以下四個方法有何差別—>

  • onmouseout：滑鼠滑出
  • onmouseover：滑鼠滑過（在表面經過即可）
  • onmouseenter：滑鼠進入（進入到裡面）
  • onmouseleave：滑鼠離開
​

​核心差別：​

​​

​​

​onmouseover 和 onmouseout 存在冒泡機制。​

​​劃過和劃出（滑鼠在誰身上，相當于劃過誰）

​​

​onmouseenter 和 onmouseleave 不存在冒泡機制。​

​進入和離開

是以，我們要使用的是哪一個方法？？？

👌沒錯了，這裡我們使用的是​​

​onmouseenter​

 ​​和​

​onmouseleave​

 ​​，因為這裡​

​button 按鈕​

 ​​是在​

​li标簽裡面​

 ​
2️⃣questionTwo:方法裡面的參數有還是沒有，有的話是什麼，如何确定？

我們想一想，滑鼠進入切換和滑鼠離開切換無非兩種狀态1、劃過變顔色按鈕顯示，2、離開變另一種顔色按鈕隐藏，是以，是肯定有參數的，而且參數可以是布爾類型，也可以是數字，但沒必要，布爾類型完全夠用

【步驟一：綁定事件】

<li @mouseenter="handEnterShow(true)" :style="{background:bgColor}" @mouseleave="handEnterShow(false)">
    <label>
      <input type="checkbox" v-model="todo.complete"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" v-show="isShow" @click="deleteItem">删除</button>
</li>

【步驟二：編寫函數】

export default {
    name: "Todo_Item",
    props: {
      todo: {
        type: Object
      },
      index: {
        type: Number
      },
      deleteTodo: {
        type: Function
      },
      deleteTodo: {
        type: Function
      }
    },
    data() {
      return {
        bgColor: 'white', // 預設的背景顔色
        isShow: false     // 預設的顯示狀态
      }
    },

    methods: {
      handEnterShow(isEnter) {
        // console.log(isEnter)
        if (isEnter) {
          // 進入
          // 更新狀态
          this.bgColor = '#aaaaaa'
          this.isShow = true
        } else {
          // 離開
          this.bgColor = 'white'
          this.isShow = false
        }
      },
      deleteItem() {
        const {todo, index,deleteTodo} = this
        if (confirm(`确認删除${todo.title}麼？`)) {
          deleteTodo(index)
        }
      }
    }
  }

4.3 如何緩存資料

【思考👽】 ​

​資料緩存到哪裡比較合适？？？​

 ​

首先，我們先有一個需求，就是我們想要我們的todolist頁面，當我們去點選一個任務項的時候，這時候我們關閉頁面或者重新整理頁面之後，下一次打開浏覽器再次看到這個頁面的時候，仍然通路到關閉之前的頁面資料。

【分析🕵️】 我們如果将資料緩存到記憶體中，這樣的話，下次打開浏覽器，緩存的資料将會丢失，是以，為了滿足需求，​

​我們隻能将資料緩存到檔案中，下次直接去從上一次的緩存檔案中取資料即可​

​

​

​那麼緩存到檔案中，需要用到什麼呢？​

 ​—localstorage

4.4 如何實作

剛說到需要用到緩存資料來實作上述的需求，那麼我們有需要考慮兩個問題：

1、什麼時候存資料–當我們頁面發生改變[删除、添加、勾選]–deepWatch

2、什麼時候取資料–當頁面每次打開的時候

3、存的是什麼資料–todos

這裡我們可以通過将原本的todos的數組，用localStorage去代替原本的數組

export default {
    name: "App",
    data() {
      return {
        // 從localstorage中讀取資料 讀取的是一個字元串 需要得到一個json字串
        todos: JSON.parse(window.localStorage.getItem("todos_key") || "[]")
      }
    },
    components: {
      Todo_Oper,
      Todo_List,
      Todo_Input
    },
    methods: {
      /*Input裡面的函數*/
      addTodo(todo) {
        this.todos.unshift(todo)
      },
      /*Item裡面的函數*/
      deleteTodo(index) {
        this.todos.splice(index, 1)
      },
      /*Oper裡面的函數*/
      deleteAll() {
        // 過濾 然後覆寫掉之前的數組
        this.todos = this.todos.filter(todo => !todo.complete);
      },
      selectAllTodos(isCheck) {
        // 先周遊
        this.todos.forEach(todo => todo.complete = isCheck)
      }
    },
    watch: {
      todos:{ // 開始監視todos
        deep: true, // 開啟深度監視
        handler:function (value) {
          // 将todos最新的值轉化為JSON格式，儲存到localstorage中
          window.localStorage.setItem("todos_key",JSON.stringify(value));
        }
      }
    }
  }
</script>

這裡需要注意的是：

1、​​

​localStorage的getItem和setItem方法 傳回的隻是一個字串​

​​，是以我們需要将其轉化為JSON格式

從localstorage中讀取資料 讀取的是一個字元串 需要得到一個json字串

2、我們在更新loaclStorage中的資料的時候，是需要實時的監聽資料的，是以我們​​

​需要使用到watch，而且是深度監聽。​

 ​
【尚矽谷】Vue2.x元件化編碼學習筆記--漸進式的JS架構

五、消息訂閱釋出

消息訂閱釋出式元件間通信的一種表現形式，利用到了​

​pubsubJs庫​

 ​

首先，我們可定是需要安裝的這個庫的

npm install

5.1 訂閱消息

訂閱消息可以被了解為釋出消息 簡單的将：

綁定事件監聽 ------ 訂閱消息

觸發事件 ------- 釋出消息

【文法】

Pubsub.subscribe('msg',fucntion(msg,data){})

【訂閱消息時的參數】

  • msg：為消息訂閱的名字
  • function：為消息訂閱的回調函數
  • msg：消息訂閱的名字(完全備援)
  • data： 釋出消息的data資料（參數）

5.2 釋出消息

【文法】

Pubsub.publish('msg',data)

【釋出消息的參數】

  • msg：消息訂閱的名字
  • data：參數

5.3 使用

【步驟一】：導入Pubsub子產品

import Pubsub from 'pubsub-js'      
Pubsub.subscribe('deleteTodo',(msg,index) =>{
        this.deleteTodo(index)
})      
Pubsub.publish('deleteTodo',index);

5.3 注意事項

  1. 優點：此種方式可以實作任意關系元件間的通信(資料)
vue 資料 元件化 tomcat
上一篇: 【視訊】逆變換抽樣将資料标準化和R語言結構化轉換：BOX-COX、凸規則變換方法
下一篇: 動态修改Excel (C#版本)

繼續閱讀