詳解vue-router和vue-cli以及組件之間的傳值
首先簡(jiǎn)單介紹使用vue-router的四個(gè)基本步驟：（為了方便演示，所有代碼都寫在一個(gè)文件里）
1.定義組件
2.定義路由
3.創(chuàng)建router實(shí)例并將定義好的路由傳入
4.創(chuàng)建和掛載根實(shí)例
再來說一下vue-cli
一、安裝vue-cli腳手架工具
cnpm install vue-cli -g
二、 創(chuàng)建項(xiàng)目
vue init webpack-simple vue_webpack
使用的是webpack-simple模板，項(xiàng)目名為vue_webpack , webpack-simple和webpack模板區(qū)別就是少了代碼檢查和單元測(cè)試這些東西.
三、安裝項(xiàng)目需要的依賴文件
進(jìn)入vue_webpack項(xiàng)目文件夾
cnpm install 安裝完成后 項(xiàng)目目錄下會(huì)多出node_modules文件夾，所有依賴文件都在里面,現(xiàn)在可以測(cè)試項(xiàng)目是否創(chuàng)建成功： npm run dev,默認(rèn)8080端口，需要修改可以到 package.json中在scripts的dev后面添加--port8000。
App.vue后綴為.vue的文件基本格式為：template + script + style 三部分組成
四、項(xiàng)目上線
自己的項(xiàng)目文件都需要放到 src 文件夾下
項(xiàng)目開發(fā)完成之后，可以輸入 npm run build 來進(jìn)行打包工作，
打包完成后，會(huì)生成 dist 文件夾，如果已經(jīng)修改了文件路徑，可以直接打開本地文件查看
項(xiàng)目上線時(shí)，只需要將 dist 文件夾放到服務(wù)器就行了。
父組件和子組件之間進(jìn)行數(shù)據(jù)傳遞：
在1.0中有$dispatch和$broadcast，但是在2.0中取消了，同樣1.0中支持的雙向數(shù)據(jù)綁定<Child :fff.sync=”hu”></Child>，在2.0中也不支持了現(xiàn)在依然還是使用下面的方式來做。
下面的例子中app為父組件，child和news為app的子組件，child1為child的子組件。下面將演示從app向另三個(gè)子組件傳遞數(shù)據(jù) 和 從三個(gè)子組件向app父組件傳遞數(shù)據(jù)。
先看一下目錄結(jié)構(gòu)：使用的是 webpack-simple模板
頁(yè)面布局：
一、從子級(jí)向父級(jí)傳遞數(shù)據(jù)
1、通過事件的方式從子級(jí)向父級(jí)傳遞數(shù)據(jù)：
在父級(jí)中使用了模塊后通過下面的方式和子集進(jìn)行通信，getChildDate是在父級(jí)中定義的方法，這個(gè)名字隨便取，通過該方法接收子集傳來的數(shù)據(jù)。Getfromchild是在子集中定義的方法，通過$emit(參數(shù))的形式向父級(jí)傳遞數(shù)據(jù)，其中第一個(gè)參數(shù)是在父級(jí)中綁定的方法這里就是Getfromchild，第二個(gè)參數(shù)是要傳遞的數(shù)據(jù)，如有多個(gè)就寫成數(shù)組。
<Child v-on:getfromchild="getChildDate"></Child>
2、通過傳遞對(duì)象的方式
如果是父級(jí)傳數(shù)據(jù)到子級(jí)后，修改子集數(shù)據(jù)的同時(shí)父級(jí)也要跟著改變，可以使用另一種方式，在從父級(jí)往子級(jí)傳的時(shí)候把要傳的數(shù)據(jù)a放在一個(gè)對(duì)象里，把這個(gè)對(duì)象傳過去，在子級(jí)中我們不去修改這個(gè)對(duì)象，而是修改他的屬性a的值，父級(jí)中同樣會(huì)跟著改變。
二、通過props的方式從父級(jí)向子級(jí)傳遞數(shù)據(jù)：
在父級(jí)中：fff是在子級(jí)中要用的名字，如果fff前面有：那么后面的hu就是個(gè)變量，在data中要去定義。如果沒有那么就是普通字符串。
<Child :fff=”hu”></Child>
在子級(jí)中：用props去接收傳來的數(shù)據(jù)
父組件：
子組件child
子組件child的子組件child1
子組件news
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹是八種vue實(shí)現(xiàn)組建通信的方式，包括、props 父組件與子組件通信、$emit 子組件父組件傳遞、$emit與props結(jié)合 兄弟組件傳值等等，想具體了解的朋友可以參考下面文章的具體內(nèi)容2021-09-09
Vue通過v-for實(shí)現(xiàn)年份自動(dòng)遞增
這篇文章主要為大家詳細(xì)介紹了Vue通過v-for實(shí)現(xiàn)年份自動(dòng)遞增，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
Vue動(dòng)態(tài)組件表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue動(dòng)態(tài)組件表格的實(shí)現(xiàn)代碼,包括框架結(jié)構(gòu)組件，文中還給大家封裝了幾個(gè)組件，有按鈕組件、圖片組件、滑動(dòng)開關(guān)，結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue.js中實(shí)現(xiàn)登錄控制的方法,結(jié)合實(shí)例形式分析 vue.js操作登陸頁(yè)面流程控制相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例
本篇文章主要介紹了vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-10-10
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案
這篇文章主要介紹了vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在使用vue腳手架搭建前端工程時(shí),經(jīng)常會(huì)遇到打包上線后的緩存問題,許多開發(fā)者會(huì)直接在index.html中加入類似以下代碼來解決緩存問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue3的setup的使用和原理,結(jié)合實(shí)例形式詳細(xì)分析了vue3 setup的基本功能、原理與使用方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue2使用?element表格展開功能渲染子表格的方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01