詳解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í)有所幫助，也希望大家多多支持億速云。