Ⅰ Vue基礎知識
數據雙向綁定，組件化，單文件組件
全局api： vue.extend 、 vue.set
實例選項: new Vue() 、 el 、 data 、 compents 都是vue實例選項
實例屬性和方法： vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的實例和方法
指令： directive
內置組件： <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>
數組中不可用的方法：slice，concat；
直接修改數組list[i] = 值，不可以這樣直接修改；
Vue.set(數組，索引，{值}) vue的全局方法set來更改數組的某一項的值
標簽屬性和條件渲染
標簽屬性： v-bind：href='link"; 等效於 :href="link" 動態綁定；
條件渲染： v-if 、 v-else 、 v-show ；
數據綁定： {{...}} 、 v-html (原始-HTML)、 v-text ；
事件綁定-內置事件綁定，自定義事件綁定
v-on:click="run" 等效於 @:click="run" 事件綁定；
自定義事件綁定： 父組件自定義事件
<my-compented @my-event='toggle'></my-compented>
子組件觸發 my-event 自定義事件； this.$emit('my-event', opation)；
父組件執行toggle 函數；
計算屬性和數據監聽
computed選項 -計算屬性：根據我們調用屬性來跟新，調用的屬性沒有變更，我們computed選項裡面的方法讀取的是緩存；
頁面內容響應數據v-once
如果你需要頁面內容響應數據的變化，就不加v-once。
如果你需要頁面內容渲染後，不隨數據的變化而變化，就加上這個。
對於一些固定不變的組件，在調用時我們可以加上v-once，只在第一次渲染執行，保存數據在內存中，後面再調用直接從內容中提取，提高執行效率。
應用
組件的通信
<p:is = "動態的組件名"></p> 等同於 <動態的組件名></動態的組件名> 動態綁定組件
註：Vue有個單項數據流的概念：即父組件傳遞給子組件的參數，子組件不能直接修改；防止引用類型參數被修改後，如果父組件中其他地方也使用了此參數會受到影響。
子組件 props 接受的兩種形式：
數組： ['first-name','two-name'] ，從父組件傳遞兩個屬性值；
動態展現： {{firstName}}
對象：
slot：插槽
父組件插件裡面定義的內容放到子組件 slot 中：
子組件
vue高級功能--過渡和動畫
自定義指令：
使用 vue-cli的優勢：
成熟的vue項目架構設計；
本地測試伺服器；
集成打包上線方案 webpack
npm install vue-cli -g ：全局安裝vue-cli
vue init webpack my-project ：初始化項目
npm install 安裝項目依賴
npm run dev ：在localhost啟動測試伺服器；
npm run bulid ：生成上線目錄（部署）
a、安裝 vue-router
b、配置路由
6、關閉eslint
dev模式下，默認會做eslint檢測，若要關閉，打開 config/index.js ，設置 useEslint: false ，${}佔位符，多行字元串
7、生命周期
8、支持es6
es6中很多新特性很好用class、promise、then、catch、...（數組轉換符號）、函數設置參數默認值等
a、安裝babel-polyfill
b、在入口main.js文件當中引入:
c、找到build文件夾下的webpack.base.conf.js
文章參考： 慕課網-歐米雪兒lyy
Ⅱ 單文件組件和Vue中的路由（頁面跳轉的實現）
路由就是根據網址的不同，返回不同的內容給用戶。
入口文件main.js掛載了app這個掛載點，同時引入App組件和路由。
App.vue組件中使用<router-view>寫入了路由，<router-view>使得每個頁面顯示的是根據路由設置當前地址所對應的內容。
以下為router目錄下的index.js文件，文件寫明了訪問某個路徑時顯示哪個組件以及組件名是什麼。這些組件都需要在文件頭的部分進行引入。
在寫每個組件的.vue文件的過程中，要在邏輯部分註明它的name，這與router/index.js中申明的組件name保持一致。
在需要實現點擊跳轉的元素區域使用<router-link :to=" "> to表示跳轉到哪個頁面，""內的內容按路由文件index.js配置的內容來確定格式。
下圖綁定的是動態路由，:to=的內容由兩部分組成。用+連接。
註：把<router-link>加到我們需要實現頁面跳轉的標簽外時，會把標簽內一些字體顏色改變。這是因為<router-link>默認是個<a>標簽。我們可以直接用<router-link>包裹標簽，再重新設定字體的顏色，但是其實有更好的方法。如圖：把<li>標簽直接改為<router-link>，然後在<router-link>內加入tag="li"，這樣就可以解決字體顏色變化的問題了。
除了使用上述兩種方法，還可以使用router的實例方法實現頁面跳轉。「 」中寫法與router/index.js中定義的形式保持一致。
用在函數中方式如下：
Ⅲ 解決VScode編寫vue 單文件組件各種跳轉問題
vue-css-peek
Vue Peek
vue-helper
vue-jumptotag
簡單快捷鍵綁定後可以快速定位到style、template、script標簽
F12類名跳轉到定義
F12屬性跳轉到定義
F12方法跳轉到定義
視頻地址
Ⅳ vue2.0項目上線後，進去後變成如圖所視，刷新沒用，必須關掉移動端在進去才有用，怎麼回事
一、前言
之前我們通過nodejs並利用vuecli來創建vue項目，非常方便的就實現了前後端一體化的操作。不過在項目開發的時候為了提高開發效率我們需要依賴於一些插件幫助我們提高開發效率，那麼今天我們就來介紹一些優秀的vue插件並且學會如何製作屬於自己的插件。
二、單文件組件
在我們之前講到的 nodejs輕松創建第一個vue應用中篇，這篇文章的時候，我們創建了一個vue的原生應用，效果如圖所示：
那麼現在我們需要把默認的頁面換成其它的vue組件來顯示，首先我們創建一個幾個js文件，如圖：
然後創建一個vue組件並設置組件的屬性，如圖：
然後我們將組件添加到入口組件中，如圖：
此時的test組件就能被應用到該項目的頁面中了，我們來啟動一下這個應用，如圖：
此時就實現了頁面內容的更新。其實這里是相當於把我們的vue做成了一個單文件組件，之前我們在學習vue的時候，一直都是依賴於html文件存在的，不過如果你是想要在nodejs上運行的話，還可以使用單文件組件，當然，單文件組件是我們極力提倡的寫法。
三、UI組件
我們都知道，前端發展到現在，對於用戶的體驗和視覺感受都非常重視，因此就出現了很多的UI組件庫，比如Elementui、vant、iview、Vuetify、 Mint UI、ant-design-vue等，下面我們將以pc端和移動端為主，分別介紹兩款不同的UI組件庫給大家認識並且簡單的使用一下，來領略下UI組件的魅力吧。
1.PC端UI組件 1).ElementUi
由餓了么前端團隊開源的UI框架，可以說是目前為止最好的桌面端UI組件庫了，不僅界面美觀，而且極易上手，下面我們來安裝一下，首先在項目目錄下打開cmd，然後輸入命令：
npm i element-ui -S
靜靜的等著下載好這個組件庫就好了。然後我們將組件引入vue組件中，並對組件的結構進行重構，如圖：
這樣就可以將一些花哨的元素添加進去了。
2).Ant Design Vue
旨在於開發後台管理系統界面，如下：
npm install iview --save
安裝好了之後還是引入它，然後使用，如圖：
可以看到，我們可以同時使用多個組件庫。
3).iview
主要用於後端界面的開發，如下：
npm install iview --save
除此之外，iview weapp也是一款不錯的ui框架，不過它主要用於微信小程序開發。
2.移動端組件 1).vuetify
最先將它是因為他不僅支持移動端而且還支持pc端，做到了多端兼容，而且無需寫css就能實現非常美觀的界面。首先下載，如下：
npm install --save vuetify
2).vant
下載安裝，如下：
npm i vant -S
3).Mint UI
也是餓了么前端團隊開發的基於移動端的組件庫，首先來下載安裝，如圖：
npm i mint-ui --save
四、插件
可以看到，我們所使用的每個組件庫要想使用，都必須下載，然後在主入口js文件main.js中導入並使用Vue.use這個方法來將該組件庫加入到項目中去，已達到全局通用的效果。下面開始我們的插件編寫之旅，首先創建一個放置插件的文件夾，然後建立如下文件，如圖：
以上創建的便是一個插件目錄和文件，然後我們來寫單文件vue頁面，如下：
然後我們以模塊化的形式導出單頁面文件，如圖：
緊接著我們注冊剛才寫好的插件，如圖：
最後我們將其應用在app.vue文件中，如圖：
此時咱們寫的插件就能應用到頁面中了，如圖：
五、總結
Ⅳ vue單文件組件在同一個頁面調用，單文件中的點擊其他區域隱藏事件
需求：點擊.right-box 顯示彩虹幣浮層，點擊其他區域隱藏彩虹幣浮層
遇到的問題：
1、點擊第一個.right-box，第一個彩虹幣浮層顯示；
2、點擊第二個.right-box，第二個彩虹幣浮層顯示，第一個彩虹幣浮層未隱藏
期望結果：
1、點擊.right-box，只顯示當前彩虹幣浮層，其他彩虹幣浮層都隱藏；
2、點擊非.right-box區域，所有前彩虹幣浮層都隱藏
產生問題的原因：
.right-box的點擊事件添加了阻止冒泡，點擊任何一個right-box，都不會觸發全文的點擊事件
添加阻止冒泡是因為整個頁面添加了點擊隱藏彩虹幣浮層的事件，如果不阻止冒泡為了讓點擊彩虹幣浮層顯示出來，
解決方案：
給全文綁定點擊事件時，允許捕獲，這樣即使點擊.right-box也會觸發全文的點擊事件
父組件：
子組件：
Ⅵ .vue文件結構解析
關於單文件組件
vue 的單文件相當於一個頁面中的 組件 ，包含了關於該組件的 html-css-js 文件集合，
這么做的目的有利於項目的管理和整合，官方說法是有 構建步驟 。
在 <template/> 標簽下只能有一個子節點元素，如果寫多個如 <div/> 這樣的標簽則會報錯，
如下所示:
.vue文 件可包含 html-css-js ，webpack自動打包成三個文件？
在.vue文件中，dom結構可以寫在<template/>標簽下，
而針對該 dom 結構的樣式文件則作為 <template/> 標簽的 兄弟 元素 <style/> 存在，
同樣的控制該 dom 結構的腳本程序寫在另一個兄弟元素 <script/> 之中，
這樣一來，每個組件自己對應的結構樣式都在同一個文件之中，
便不會與其它的組件搞混了。
Ⅶ Vue 單文件組件 (SFC) 規范
模板
腳本
樣式
簡介
.vue 文件是一個 自定義的文件類型 ，用類 HTML 語法描述一個 Vue 組件。
每個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還允許添加可選的 自定義塊 。
Ⅷ 為什麼我推薦使用JSX開發Vue3
以防萬一有的同學實在不看官方文檔，我先提一嘴，SFC 就是寫 Vue 組件的時候寫的.vue文件，這一個文件就是一個 SFC，全稱 Single File Component，也即單文件組件。
在開始說我個人的觀點之前，我們先來看幾個事實：
一是： Vue3 的定義原生支持 JSX，並且 Vue3 源碼中有jsx.d.ts來便於使用 JSX。 不知道同學們看到這里會想到什麼， 我的第一反應是： 社區對於 JSX 的需求聲音是不小的，所以會反向推動 Vue3 官方對於 JSX 的支持。
二是：AntDesign 的 vue3 版本，基本全部都是用 JSX 開發的，而且 Vue3 現在官方的 babel-jsx 插件就是阿里的人一開始維護的， 雖然我向來不喜歡阿里系的 KPI 推動技術方式，而且現在的 JSX 語法支持也不是很符合我的期望，但至少在使用 JSX 開發是更優秀的選擇這點上，我還是很認可 AntDesign 團隊的。
OK，說這些呢，主要是先擺出一些事實作為依據，讓有些同學可以不需要拿什麼：
這些觀點來批鬥我，首先我都會從客觀的角度來分析為什麼，至少是我是能講出優劣勢的理由的。
OK，前言差不多到這里，接下來咱給您分析分析，為什麼你應該選擇 JSX 來開發 Vue。
其實第一點就已經是殺手了，對於想要使用 TypeScript 來開發 Vue3 應用的同學來說，這簡直就是 SFC 無法克服的世界難題。
一句話概括： TypeScript 原生支持 JSX 語法，而基本無望 TS 官方能支持 SFC 的 template 語法 。
TS 毫無疑問在前端社區的重要性越來越大，但凡未來對於代碼質量有一定要求的前端團隊，都應該會選擇使用 TS 來進行開發。 而且現在基本上在 NPM 上都能看到包你都能找到對應的 TS 定義，現在使用 TS 開發成本已經只剩下 你是不是會 TS 語法了 ，在這種情況下是否支持 TS 則是開發模式在未來走不走的遠的重要原因。
目前 SFC 只能通過shim讓 TS 可以引入.vue文件，但是對於所有 SFC 的組件的定義都是一樣的：
也就是說你引入的 SFC 組件，TS 是不知道這個組件的 Props 應該接收什麼的。所以你無法享受到這些 TS 的優勢：
當然你會說既然 Vue 官方能開發處 SFC 的語法，自然會支持這些特性。我表示這當然有可能，但是這個難度是非常大的，需要很多方面的支持，甚至可能需要 TS 官方團隊願意協助， 但是我想不到 TS 官方有什麼理由來支持 SFC，因為這只是 Vue 自己創建的方言，在其他場景下是沒有使用的，TS 是面向全社區的，我覺得他們不會考慮主動來支持 SFC。
那麼有同學要問了，JSX 不也是非原生的 JS 語法么，他怎麼就能讓 TS 官方支持了呢，是不是 FB 和微硬之間有什麼 PY 交易？
這就涉及第二點了，JSX 和靜態模板的靈活性區別。
很多人弄錯了一個問題，就是覺得 SFC 的模板語法和 JSX 是一樣的，都是一種別人發明的語法，並不是 JS 原生的。這是事實，但又有一些區別，這個區別主要是體現在對於 JSX 的認知上。
一句話概括： JSX 並沒有擴展 JS 的語法，他只是縮略了 JS 的寫法！其本質就是 JS 的語法糖
就像 es6 給增加的語法糖，比如
這種寫法並沒有擴展 JS 的能力，只是簡便了寫法，JSX 也是一樣的。
JSX 其實就是方法調用，他和 JS 是有一對一對應關系的，我們來看一個例子：
這里的 JSX 語法編譯之後其實就是：
而 JSX 就是這些了，沒有什麼更多的內容，所以說 JSX 只是 方便我們寫嵌套的函數調用的語法糖 ，而其本身沒有擴展任何其他的內容。
但是 SFC 就不一樣了。
SFC 定義的不僅是語法，更是文件。
SFC 的具體定義是 單文件組件 ，它本身就是把一個文件看作一個單位，所以他的約束性是要大很多的，你必須具有固定的文件結構才能使用 SFC，這做了很多的限制：
我們一點點來講
這個說實話非常非常不方便，很多時候我們寫一個頁面的時候其實經常會需要把一些小的節點片段拆分到小組件裡面進行復用（如果你現在沒有這個習慣可能就是因為 SFC 的限制讓你習慣了全部寫在一個文件內）。
React 生態中豐富的 css-in-js 方案就是很好的例子，我們可以通過：
如果我們這個頁面需要使用特定樣式的按鈕，通過這種方式在頁面文件裡面封裝一下是非常常見的。因為沒必要把這個組件拆分出去，他也不是一個可復用的組件，拆分出去了還要多一次import。
Vue 生態基本沒有 css-in-js 的成熟方案其實跟這個限制也很有關系。
再來一個例子，比如我們封裝了一個 Input 組件，我們希望同時導出 Password 組件和 Textarea 組件來方便用戶根據實際需求使用，而這兩個組件本身內部就是用的 Input 組件，只是定製了一些 props：
在 JSX 中可以非常簡單地實現，但是如果通過 SFC，你可能就要強行拆成三個文件，另外為了方便，你可能還要增加一個index.js來導出這三個組件，你能想像這多了多少工作量么。
我不知道有多少同學看過 Vue 的 template 編譯出來之後的代碼，以我的經驗來說看過的可能不會超過 50%（樂觀估計），建議同學們如果還不了解的，可以去嘗試看一下。
為什麼要看這個呢？因為你看了之後你會發現，你在 template 裡面寫的類似 HTMl 的內容，其實跟 HTML 根本沒啥關系，他們也會被編譯成類似 JSX 編譯出來的結果。
類似這樣的結果，而這裡面h函數調用的結果就是一個 VNode，是 Vue 中的節點的基礎單元。那麼既然這些單元就是一個對象，其實理所當然的，他們是可以作為參數傳遞的。 也就是說，理論上他們是可以通過props把節點當作參數傳遞給其他組件的。
這個做法在 React 中非常常見，叫做renderProps，並且其非常靈活：
但是因為 SFC 模板的限制，我們很難在 SFC 裡面的 props 上寫節點：
這樣寫是不行的，因為 SFC 定義了:header綁定接受的只能是 js 表達式，而 顯然不是。
因為通過 props 傳遞不行，所以 Vue 才發明了 slot 插槽的概念
雖然我們一直再說 Vue 簡單，但是事實上ScopedSlots一度成為新手理解 Vue 的噩夢，很多同學都被這個繞來繞去的作用域整的死去活來。
我們看一個ScopedSlots的例子：
這里ctx是Comp裡面的屬性，通過這種方式傳遞出來，讓我們在當前組件可以調用父組件裡面的屬性。這簡直就是理解的噩夢，但是如果用 JSX 實現類似功能就非常簡單：
我們只是給一個叫做scope的 props 傳遞來一個函數，這個函數接受一個name屬性，在Comp裡面會調用這個函數並傳入name。 簡單來說我們傳入的就是一個構建節點片段的函數，就是這么簡單。
這就是因為 SFC 的模板的限制，導致靈活性不足，Vue 需要去創造概念，創造關鍵字來抹平這些能力的不足，而創造的概念自然就引入了學習成本。
所以其實我一直不認可 Vue 比 React 好學的說法的，如果你真的認真研究所有用法，並且總是嘗試用最合理的方式實現功能，那麼 Vue 絕對不會比 React 簡單。
這個體現在兩個方面，一個是我們定義在全局的一些固定數據如果要在組件內使用的話，就要通過this掛載到組件上。
比如我們緩存了一份城市數據，這種數據基本上是不會改的，所以也沒必要掛載到組件上讓其能夠響應式。但是在 SFC 裡面這是做不到的， 因為模板的執行上下文是在編譯時綁定。你在模板裡面訪問的變數，都會在編譯時自動綁定到this上，因為模板需要編譯，其本身也是字元串不具有作用域的概念。
而這在 JSX 中則不復存在：
另外一個方面則是在組件使用上，在 SFC 中，組件必須事先注冊，因為我們在模板裡面寫的只能是字元串而不能是具體某個組件變數。 那麼模板中的組件和真實的組件對象只能通過字元串匹配來實現綁定。這帶來了以下問題：
在 JSX 中則沒有這些問題，因為 JSX 裡面直接使用組件引用作為參數：
其實上面能看出來，除了 SFC 本身的問題之外，Vue 使用字元串模板也會帶來很多的靈活性問題。 最直接的證據，就是 Vue 使用了directive來擴展功能（當然這不是 Vue 發明的，老早的模板引擎就有類似問題）。
為什麼說directive是不得已的選擇呢？因為靜態模板缺失邏輯處理的能力。我們拿列表循環舉例，在 JS 中我們可以非常方便地通過map函數來創建列表：
而因為 JSX 本身就是函數調用，所以上面的代碼和 JSX 結合起來也非常自然：
上面的例子對應到 JS 如下：
這仍然是因為 JSX 只是 JS 的語法糖的原因，所有能在 JS 中實現的在 JSX 裡面都能實現。
而 SFC 的模板是基於字元串編譯的，其本身就是一段字元串，我們不能直接在模板裡面寫map來循環節點，（當然我們可以在可以接收表達式的地方寫，比如v-on裡面）。
那麼我們不能循環節點，有需要這樣的功能來渲染列表，怎麼辦呢？就是發明一個標志來告訴編譯器這里需要循環，在 Vue 中的體現就是v-for指令。
同學們可能要問了，既然 Vue 能實現v-for，為什麼不直接實現表達式循環列表呢？他當然也可以實現，但是他肯定不會這么選，因為成本太高了。 他要這么做就相當於他要實現一個 JS 引擎，而其實裡面很多內容又是不必須的，一個v-for其實就能夠適用大部分情況了。
但有了v-for就需要v-if，那麼後面還會需要其他各種能力，這就是一種方言的產生和發展的過程。
當然指令也不僅僅是 JS 表達式的代替品，其本身也是增加了一些其他能力的，比如它能夠讓我們更方便地訪問 DOM 節點， 但是嘛，我們用框架的理由不就是為了能夠盡可能的屏蔽 DOM 操作嘛
以上就是我對應該選擇使用 JSX 還是 SFC 進行開發的分析，其實歸根到底 SFC 的問題在於其沒有擁抱 JS， 他的語法是自己發明的，他需要有一個 JS 實現的 compiler 來讓其最終能在 JS 環境中運行，這本質上就是一種發明， 我們不能否認發明確實有優點，但我們也不能只看有點不看問題，沒能擁抱 JS 自然就很難完全復用 JS 社區的優勢 而 JS 社區一直在蓬勃發展，好用的工具一直在涌現， 而 SFC 想要使用 JS 社區的這些工具還要自己再實現一份 ，我們可以細數以下 SFC 做了哪些兼容
基本上常用的工具我們都需要等待 Vue 社區或者官方開發了插件之後才能運行。而 JSX 因為有 babel 和 typescript 的官方支持， 基本上所有新的 JS 生態工具原生都是支持的。
在這 Vue3 開始預備發力的階段，我們還是希望 Vue 社區能夠使用更優秀更規范的方式來進行開發， 其實如果我們直接使用 JSX 開發 Vue3，我們會發現很多時候我們都不需要用到emit、attrs這些概念， 甚至如果 Vue3 的 JSX 插件支持，我們甚至能夠拋棄slots。
但是因為 Vue3 一定要考慮兼容 Vue2，導致本身潛力很好的 Vue3 總是顯得縮手縮腳，這不得不說是一種遺憾。
Ⅸ vue為什麼要求組件模板只能有一個根元素
1.new Vue({el:'#app'})
2.單文件組件中，template下的元素div
一、當我們實例化Vue的時候，填寫一個el選項，來指定我們的SPA入口：
同時我們也會在body裡面新增一個id為app的div
這很好理解，就是為vue開啟一個入口，那我們不妨來想想，如果我在body下這樣
Vue其實並不知道哪一個才是我們的入口，因為對於一個入口來講，這個入口就是一個『Vue類'，Vue需要把這個入口裡面的所有東西拿來渲染，處理，最後再重新插入到dom中。
如果同時設置了多個入口，那麼vue就不知道哪一個才是這個『類'。
二、當我們在webpack搭建的vue開發環境下，使用單文件組件時，你可能會這樣：
那這里為什麼template下也必須有且只能有一個div呢？
這里我們要先看一看template這個標簽，這個標簽是HTML5出來的新標簽，它有三個特性：
1.隱藏性：該標簽不會顯示在頁面的任何地方，即便裡面有多少內容，它永遠都是隱藏的狀態；
2.任意性：該標簽可以寫在頁面的任何地方，甚至是head、body、sciprt標簽內；
3.無效性：該標簽里的任何HTML內容都是無效的，不會起任何作用；
但是呢，你可以通過innerHTML來獲取到裡面的內容。
知道了這個，我們再來看.vue的單文件組件。其實本質上，一個單文件組件，本質上（我認為）會被各種各樣的loader處理成為.js文件（因為當你import一個單文件組件並列印出來的時候，是一個vue實例），通過template的任意性我們知道，template包裹的HTML可以寫在任何地方，那麼對於一個.vue來講，這個template裡面的內容就是會被vue處理為虛擬dom並渲染的內容，導致結果又回到了開始 ：既然一個.vue單文件組件是一個vue實例，那麼這個實例的入口在哪裡？
如果在template下有多個div，那麼該如何指定這個vue實例的根入口？
為了讓組件能夠正常的生成一個vue實例，那麼這個div會被自然的處理成程序的入口。
通過這個『根節點'，來遞歸遍歷整個vue『樹'下的所有節點，並處理為vdom，最後再渲染成真正的HTML，插入在正確的位置
那麼這個入口，就是這個樹的『根'，各個子元素，子組件，就是這個樹的『枝葉'，而自然而然地，這棵『樹'，就是指一個vue實例了。
Ⅹ vue單文件組件通常是如何調用實例方法的
Vue父組件向子組件傳遞事件/調用事件
不是傳遞數據（props）哦，適用於 Vue 2.0
方法一：子組件監聽父組件發送的方法
方法二：父組件調用子組件方法
子組件：
export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('監聽成功') }) }) }， methods { callMethod () { console.log('調用成功') } } }
父組件：
<child ref="child" @click="click"></child> export default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child } }
以上這篇Vue父組件調用子組件事件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:VUEJS 2.0 子組件訪問/調用父組件的實例vue.js中父組件調用子組件的內部方法示例ES6下子組件調用父組件的方法(推薦)