首先簡單介紹使用vue-router的四個基本步驟：（為了方便演示，所有代碼都寫在一個文件里）

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ū)別就是少了代碼檢查和單元測試這些東西.

三、安裝項(xiàng)目需要的依賴文件

進(jìn)入vue_webpack項(xiàng)目文件夾

cnpm install 安裝完成后 項(xiàng)目目錄下會多出node_modules文件夾，所有依賴文件都在里面,現(xiàn)在可以測試項(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)行打包工作，

打包完成后，會生成 dist 文件夾，如果已經(jīng)修改了文件路徑，可以直接打開本地文件查看

項(xiàng)目上線時，只需要將 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向另三個子組件傳遞數(shù)據(jù) 和 從三個子組件向app父組件傳遞數(shù)據(jù)。

先看一下目錄結(jié)構(gòu)：使用的是 webpack-simple模板

頁面布局：

一、從子級向父級傳遞數(shù)據(jù)

1、通過事件的方式從子級向父級傳遞數(shù)據(jù)：

在父級中使用了模塊后通過下面的方式和子集進(jìn)行通信，getChildDate是在父級中定義的方法，這個名字隨便取，通過該方法接收子集傳來的數(shù)據(jù)。Getfromchild是在子集中定義的方法，通過$emit(參數(shù))的形式向父級傳遞數(shù)據(jù)，其中第一個參數(shù)是在父級中綁定的方法這里就是Getfromchild，第二個參數(shù)是要傳遞的數(shù)據(jù)，如有多個就寫成數(shù)組。

<Child v-on:getfromchild="getChildDate"></Child>

2、通過傳遞對象的方式

如果是父級傳數(shù)據(jù)到子級后，修改子集數(shù)據(jù)的同時父級也要跟著改變，可以使用另一種方式，在從父級往子級傳的時候把要傳的數(shù)據(jù)a放在一個對象里，把這個對象傳過去，在子級中我們不去修改這個對象，而是修改他的屬性a的值，父級中同樣會跟著改變。

二、通過props的方式從父級向子級傳遞數(shù)據(jù)：

在父級中：fff是在子級中要用的名字，如果fff前面有：那么后面的hu就是個變量，在data中要去定義。如果沒有那么就是普通字符串。

<Child :fff=”hu”></Child>

在子級中：用props去接收傳來的數(shù)據(jù)

父組件：

子組件child

子組件child的子組件child1

子組件news

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論