Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】

目? ?錄

6、組件通信

安裝 Vetur 插件

6.1、父子組件通信

子定義props

父組件模板

圖解

6.2、子父組件通信

父組件

子組件

圖解

6.3、案例展示

6.3.1、運行截圖

6.3.2、案例代碼

7、項目發送、啟動

1、項目如何發給別人

2、啟動別人的項目

---

6、組件通信

安裝 Vetur 插件

6.1、父子組件通信

本質：子要用父的數據！

子定義props

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

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

父組件模板

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

圖解

6.2、子父組件通信

子傳遞數據給父，換而言之，父需要使用子的數據。

父組件

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

子組件

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

圖解

6.3、案例展示

6.3.1、運行截圖

6.3.2、案例代碼

7、項目發送、啟動

1、項目如何發給別人

刪除?項目?目錄下面的node_modules包。 壓縮，發給他人即可！

2、啟動別人的項目

解壓壓縮包

進入 項目文件夾 所在的cmd目錄

安裝 項目依賴包【cnpm i---速度快】或者【npm i---速度慢】

安裝包結束之后， 執行 “ npm run dev ” 啟動項目即可！

開發的時候，要 保證 項目在運行中?！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。