當子元件需要和父級元件進行通訊，可以派發並監聽自定義事件。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
購物車title
>
src=
"vue.js"
>
script
>
>
.active
style
>
head
>
>
}是乙個動態的值 左右就用雙括號}-->
:title
="title"
>
}
h2>
course-add
>
course-list
>
}-->
>
// 課程新增的元件
vue.
component
('course-add',}
, template:
` 新增
`, methods:},
})// 課程列表元件
// 元件命名建議取成羊肉串命名法，如果使用駝峰的方式將來在使用的時候很容易產生混淆
// 因為最終在列表元件那裡使用的時候一般情況下是不區分大小寫的
// 所以即使用了駝峰命名在下面也無法使用因為無法識別
// 而且元件名在內部進行註冊的時候會對命名進行轉換,這樣會造成對使用過程造成混淆
// 推薦元件在命名的時候就進行羊肉串命名法
vue.
component
('course-list',}
,// props是乙個屬性，接受老爹傳過來的一些屬性
// 定義方式有兩種：一種是物件,一種是陣列
// 如果屬性是這樣定義['courses'] ，那麼就是希望老爹傳過來的屬性名就叫courses
// 將來在列表元件裡就可以通過this.courses來訪問傳進來的引數了
// ['courses']這種方式對引數的校驗沒有好處，一般情況下用得更多的是物件形式
// 會用key的方式去命名，然後用type對其型別進行約束
props:},
template:
`
沒有任何課程資訊
} `}
)// 模擬非同步資料呼叫
function
getcourses()
)})}
// 1.建立vue例項
// 儲存vue例項
newvue(,
methods:},
// 非同步用async await
// 建立鉤子
async
created()
,// mounted獲取業務資料
// mounted時間點更靠後，除了建立之後還做了掛載，獲取業務資料
// 掛載的實際操作是將前面所有的渲染函 數執行之後將虛擬dom轉換為真實dom
// 也就是在mounted中可以訪問到dom元素了
// 其實vue例項被建立，掛載，渲染函式執行虛擬dom轉換為真實dom都是很快的
// 非同步資料獲取選擇mounted和created本質上沒有什麼差別
// 不用以為看到created介面會比較早 沒有這個區別
// 因為我們訪問資料所花銷的時間遠遠大於初始化掛載的時間，沒有什麼實質上的區別
// mounted(){},
// computed是值變化了返回值
computed:},
// watch 做某個值得監控，如果發生變化了則會執行這個函式做我想做的事情
// watch是值變化了執行這個函式
// 監控courses這個值的變化
// watch如果不加特別宣告表示值變化之後才會執行，它一開始是不會執行的
// 預設情況下watch初始化時不執行想要watch立即執行 immediate為true。立即執行一次
// watch:
// },
// 為了一開始就能執行要選帶選項的watch vwatcher-options
watch:}}
,})script
>
body
>
html
>
vue元件化之後原本html裡面至少二三十行的內容變成兩行，這就是元件化帶來的最明顯的好處
Vue自定義事件
父元件使用props傳遞資料給子元件，子元件怎麼跟父元件通訊呢？這時，vue的自定義事件就派上用場了。本文將詳細介紹vue自定義事件 每個 vue 例項都實現了事件介面 events inte ce 即 使用 on eventname 監聽事件 使用 emit eventname 觸發事件 注意 v...
vue 自定義事件
vue中自定義的事件，不同於元件和props屬性，事件名沒有任何的大小寫轉換，觸發的事件必須完全匹配這個事件所用的名稱，所以在使用this.emit clicka data 時，clicka必須與定義的事件名一致 當引數為物件時，父元件接收時以及子元件傳參時，最好使用json.parse json....
Vue 自定義事件
我們知道，子元件通過 prop 來接收父元件傳遞的資料。但子元件怎麼跟父元件通訊呢？這個時候 vue 的自定義事件系統就派得上用場了。每個 vue 例項都實現了事件介面，即 vue 的事件系統與瀏覽器的 eventtarget api 有所不同。儘管它們執行起來類似，但是 on 和 emit 並不是...