Vue.js實(shí)訓(xùn)【基礎(chǔ)理論(5天)+項(xiàng)目實(shí)戰(zhàn)(5天)】博客匯總表【詳細(xì)筆記】

目? ?錄

6、組件通信

安裝 Vetur 插件

6.1、父子組件通信

子定義props

父組件模板

圖解

6.2、子父組件通信

父組件

子組件

圖解

6.3、案例展示

6.3.1、運(yùn)行截圖

6.3.2、案例代碼

7、項(xiàng)目發(fā)送、啟動(dòng)

1、項(xiàng)目如何發(fā)給別人

2、啟動(dòng)別人的項(xiàng)目

---

6、組件通信

安裝 Vetur 插件

6.1、父子組件通信

本質(zhì)：子要用父的數(shù)據(jù)！

子定義props

props就是 組件的自定義屬性，也就是 組件標(biāo)簽上面 可以 添加的屬性。

// 子組件JS里面 {...props: ['屬性名1','屬性名2','屬性名3']... } // 子組件模板里面 {{屬性名1}} {{屬性名2}} {{屬性名3}}

父組件模板

<子組件名 屬性名1="值" 屬性名2="值" 屬性名3="值"></子組件名>

圖解

6.2、子父組件通信

子傳遞數(shù)據(jù)給父，換而言之，父需要使用子的數(shù)據(jù)。

父組件

// 父模板上面 <組件名 @自定義事件="父的事件函數(shù)"></組件名> // 父JS里面 {...methods: {父的事件函數(shù)(){.....}}... }

子組件

this.$emit(‘自定義事件名’)

圖解

6.3、案例展示

6.3.1、運(yùn)行截圖

6.3.2、案例代碼

7、項(xiàng)目發(fā)送、啟動(dòng)

1、項(xiàng)目如何發(fā)給別人

刪除?項(xiàng)目?目錄下面的node_modules包。 壓縮，發(fā)給他人即可！

2、啟動(dòng)別人的項(xiàng)目

解壓壓縮包

進(jìn)入 項(xiàng)目文件夾 所在的cmd目錄

安裝 項(xiàng)目依賴包【cnpm i---速度快】或者【npm i---速度慢】

安裝包結(jié)束之后， 執(zhí)行 “ npm run dev ” 啟動(dòng)項(xiàng)目即可！

開(kāi)發(fā)的時(shí)候，要 保證 項(xiàng)目在運(yùn)行中?！

總結(jié)

以上是生活随笔為你收集整理的Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。