成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－功能組件與路由組件通信

KitorinZero / 1473人閱讀

摘要：展示信息展示時(shí)間結(jié)束后，執(zhí)行回調(diào)函數(shù)如果有上面就完成了組件的整套邏輯，最后我們還需要把組件掛在。原文鏈接其他使用快速開(kāi)發(fā)單頁(yè)應(yīng)用主體結(jié)構(gòu)使用快速開(kāi)發(fā)單頁(yè)應(yīng)用使用快速開(kāi)發(fā)單頁(yè)應(yīng)用登錄頁(yè)面使用快速開(kāi)發(fā)單頁(yè)應(yīng)用功能組件與路由組件通信

本文所涉及代碼全在vue-cnode

上圖是我們demo項(xiàng)目的整體結(jié)構(gòu)，我們可以看見(jiàn)在第三級(jí)有三個(gè)東西router,全局組件，功能組件。其中全局組件和功能組件是脫離于router的，因?yàn)檫@兩部分是所有邏輯組件共有的。我們將他提出來(lái)，放在App.vue里面而不是放在router下面的路由組件中，是為了只引用一次然后全局調(diào)用。

但是，具體的路由邏輯組件需要展現(xiàn)的全局組件內(nèi)容是不一樣的，需要功能組件交互的內(nèi)容也不一樣，所以需要在不同的路由邏輯組件中對(duì)全局組件和功能組件進(jìn)行控制。

本文就是介紹如何通過(guò)vuex對(duì)全局組件和功能組件進(jìn)行控制的。

使用vuex傳遞邏輯數(shù)據(jù)

說(shuō)是控制，其實(shí)就是組件間交互，vue中組件交互有很多方式，我們這里用vuex。

我們將多帶帶建立一個(gè)module(doc_state)，用來(lái)做功能組件和全局組件的功能交互，在module中我們將初始化功能組件或則全局組件需要的數(shù)據(jù)，和函數(shù)方法等。如下圖所示：

// doc state 需要一些變量來(lái)記錄文檔狀態(tài)
import {
  SET_TIP
} from "../mutation_types"
const state = {
  tip: {
    text: "",
    time: 2000,
    callback: null
  }
}
const mutations = {
  [SET_TIP] (state, tip) {
    state.tip = tip
  }
}
export default {
  state,
  mutations
}

這里我們以tip（提示）組件為例子講解，所有doc modules在/src/vuex/modules/doc_state。

然后我們定義doc_actions定義我們的action:

import * as types from "../mutation_types"

export const setTip = ({dispatch}, tip) => {
  if (!tip.time) tip.time = 2000 // 默認(rèn)tip展現(xiàn)時(shí)間
  dispatch(types.SET_TIP, tip)
}

actions，會(huì)在路由邏輯組件中引用，調(diào)用action就能控制我們的tip組件。

再把 doc_state掛載到store.js就可以了～

import docState from "./modules/doc_state"
export default new Vuex.Store({
  modules: {
    docState,
    content,
    userInfo
  },
  strict: debug,
  middlewares: debug ? [] : []
})
tip組件

在我們的common文件夾里面新建一個(gè)tip.vue。他就是我們的提示信息組件。（路徑/src/components/common/tip.vue）

首先我們需要獲取tip在vuex里面的數(shù)據(jù)：

vuex: {
  getters: {
    tip: ({ docState }) => docState.tip
  }
},

然后就是具體的邏輯了：

data () {
  return {
    tipVisible: false
  }
},
watch: {
  tip: "tipShow"
},
methods: {
  tipShow () {
    let self = this
    self.tipVisible = true
    setTimeout(function () {
      self.tipVisible = false
      if (self.tip.callback) {
        self.tip.callback()
      }
    }, self.tip.time)
  }
}

上面的tipVisible是我們用來(lái)控制控制展示的變量，在template里面：

tip組件一共做了三件事：

監(jiān)聽(tīng)vuex獲取的tip變量，在tip變量改變時(shí)執(zhí)行tipShow方法。

展示信息

展示時(shí)間結(jié)束后，執(zhí)行回調(diào)函數(shù)（如果有）

上面就完成了tip組件的整套邏輯，最后我們還需要把tip組件掛在App.vue。

template:

js:

import tip from "./components/common/tip"
export default {
  components: {
    tip,
  },
}

這樣我們就能在所有路由邏輯組件調(diào)用了。

調(diào)用方法

拿登錄組件作為例子。

首先我們需要引入action:

import { setMenu, setTip } from "../../vuex/actions/doc_actions"
export default {
  vuex: {
    actions: {
      setTip,
      setDetail
    }
  }
}

我們?cè)诘卿洺鲥e(cuò)的時(shí)候會(huì)給用戶提示信息：

this.setBaseInfo(this.access, (res) => {
  if (res.success) {
    this.success()
  }
  this.setTip({
    text: res.msg
  })
})

只要調(diào)用this.setTip方法就可以了。是不是很簡(jiǎn)單？組件寫好后，后面大家再使用就只需調(diào)用這一個(gè)方法。

注意
這里需要主要傳入回調(diào)函數(shù)的this的指向。建議這樣：

this.setTip({
  text: "lala",
  callback: () => {
    this.xxx()
  }
})

箭頭函數(shù)有個(gè)作用就是會(huì)綁定它聲明地方的this。這樣我們就可以在callback里面調(diào)用當(dāng)前組件的方法了。不用箭頭函數(shù)，bind一下也是可以的～

小結(jié)

你可以發(fā)現(xiàn)我們的組件交互完全是通過(guò)數(shù)據(jù)去控制的。在搭建功能組件和vuex的module時(shí)會(huì)復(fù)雜一點(diǎn)，但是邏輯更清晰，我們?cè)赿ebug時(shí)候也更方便。在子組件調(diào)用時(shí)也非常的簡(jiǎn)單，就相當(dāng)提供了一個(gè)接口。

原文鏈接：http://hiluluke.cn/2016/08/25...

其他

使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－主體結(jié)構(gòu)

使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－vue-router

使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－登錄頁(yè)面

使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－功能組件與路由組件通信

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/65084.html

相關(guān)文章

  • 使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－主體結(jié)構(gòu)

    摘要：本文以及后面相應(yīng)文章，主要是相關(guān)技術(shù)棧來(lái)快速的實(shí)現(xiàn)單頁(yè)應(yīng)用開(kāi)發(fā)。原文出處其他使用快速開(kāi)發(fā)單頁(yè)應(yīng)用主體結(jié)構(gòu)使用快速開(kāi)發(fā)單頁(yè)應(yīng)用使用快速開(kāi)發(fā)單頁(yè)應(yīng)用登錄頁(yè)面使用快速開(kāi)發(fā)單頁(yè)應(yīng)用功能組件與路由組件通信 本文所涉及代碼全在vue-cnode 單頁(yè)應(yīng)用，即在一個(gè)頁(yè)面集成系統(tǒng)中所有功能，整個(gè)應(yīng)用只有一個(gè)頁(yè)面。因?yàn)槁酚傻目刂圃谇岸?，單?yè)面應(yīng)用在頁(yè)面切換時(shí)比傳統(tǒng)頁(yè)面更快，從而在前端體驗(yàn)更好。 將邏輯從...

    dcr309duan 評(píng)論0 收藏0

  • 使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－vue-router

    摘要：當(dāng)前路由對(duì)象調(diào)用此函數(shù)處理切換過(guò)程的下一步終止切換重定向到另一個(gè)路由由于是路由切換后，只有上面的兩個(gè)屬性。原文地址其他使用快速開(kāi)發(fā)單頁(yè)應(yīng)用主體結(jié)構(gòu)使用快速開(kāi)發(fā)單頁(yè)應(yīng)用使用快速開(kāi)發(fā)單頁(yè)應(yīng)用登錄頁(yè)面使用快速開(kāi)發(fā)單頁(yè)應(yīng)用功能組件與路由組件通信 本文所涉及代碼全在vue-cnode vue-router主要作用是將路由控制，轉(zhuǎn)移到前端。我們將會(huì)在vue-router里面保存一個(gè)路由表，在vue...

    mingde 評(píng)論0 收藏0

  • 采用vue+webpack構(gòu)建的單頁(yè)應(yīng)用——私人博客MintloG誕生記

    摘要：我采用原生編寫后臺(tái)，因?yàn)楦杏X(jué)增刪改查的功能很簡(jiǎn)單，就懶得用框架了其實(shí)是不會(huì)。瀏覽模式它也有一個(gè)，用來(lái)切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進(jìn)行文章的撰寫與修改。 介紹 項(xiàng)目地址：https://github.com/jrainlau/MintloG （特別亂，參考就好-_-|||）showImg(https://segmentfault.com/img/b...

    Terry_Tai 評(píng)論0 收藏0

  • 使用Vue快速開(kāi)發(fā)單頁(yè)應(yīng)用－登錄頁(yè)面

    摘要：首先我們從登錄頁(yè)面以及開(kāi)始，因?yàn)楹罄m(xù)很多其它的頁(yè)面都需要登錄信息。大家還是看看我這做個(gè)指引，具體還是看代碼原文地址其他使用快速開(kāi)發(fā)單頁(yè)應(yīng)用主體結(jié)構(gòu)使用快速開(kāi)發(fā)單頁(yè)應(yīng)用使用快速開(kāi)發(fā)單頁(yè)應(yīng)用登錄頁(yè)面使用快速開(kāi)發(fā)單頁(yè)應(yīng)用功能組件與路由組件通信 本文所涉及代碼全在vue-cnode 前面兩篇都是介紹組織結(jié)構(gòu)和vue-router，從本文開(kāi)始我們將講一些如何優(yōu)雅的用vue編寫單頁(yè)應(yīng)用。首先我們從...

    yeyan1996 評(píng)論0 收藏0

  • Vue面試中，經(jīng)常會(huì)被問(wèn)到的面試題/知識(shí)點(diǎn)(2019改進(jìn)版)

    摘要：在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題知識(shí)點(diǎn)，對(duì)一些知識(shí)點(diǎn)進(jìn)行更加深入的描述。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程。改變中的狀態(tài)的唯一途徑就是顯式地提交。這兩個(gè)可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。 在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題/知識(shí)點(diǎn)，對(duì)一些知識(shí)點(diǎn)進(jìn)行更加深入的描述。 一、對(duì)于MVVM的理解？ MVVM 是 Model-View-Vie...

    singerye 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<