https://jsrun.pro/CLfKp/edit
### 基本示例
組件是可復用的Vue實例, 所以與new Vue接收相同的選項, 例如:
data、computed、watch、methods。
### 組件的復用
組件可以任意次的復用
#### data 必須是一個函數
**一個組件的`data`選項必須是一個函數**,因此每個實例可以維護一份被返回對象的獨立的拷貝:
```
data: function () {
return {
count: 0
}
}
```
### 組件的組織
通常一個應用會一一顆組件樹的形式來組織。
例如,你可能會有頁頭、側邊欄、內容區等組件,每個組件又包含了其它的像導航鏈接、博文之類的組件。
* 全局注冊
* 局部注冊
### 通過Prop向子組件傳遞數據
props 選項包含該組件可接受的prop列表。
```
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
```
一個組件默認可以擁有任意數量的 prop,任何值都可以傳遞給任何 prop。在上述模板中,你會發現我們能夠在組件實例中訪問這個值,就像訪問`data`中的值一樣。
一個 prop 被注冊之后,你就可以像這樣把數據作為一個自定義 attribute 傳遞進來
```
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
```
以上也可以通過data 里的數組實現。
```
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
```
### 單個根元素
```
<h3>{{ title }}</h3>
<div v-html="content"></div>
```
然而如果你在模板中嘗試這樣寫,Vue 會顯示一個錯誤,并解釋道**every component must have a single root element (每個組件必須只有一個根元素)**。你可以將模板的內容包裹在一個父元素內,來修復這個問題,例如:
```
<div class="blog-post">
<h3>{{ title }}</h3>
<div v-html="content"></div>
</div>
```
看起來當組件變得越來越復雜的時候,我們的博文不只需要標題和內容,還需要發布日期、評論等等。為每個相關的信息定義一個 prop 會變得很麻煩:
```
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.content"
v-bind:publishedAt="post.publishedAt"
v-bind:comments="post.comments"
></blog-post>
```
所以是時候重構一下這個`<blog-post>`組件了,讓它變成接受一個單獨的`post`prop:
```
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
```
```
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
```
上述的這個和一些接下來的示例使用了 JavaScript 的模板字符串來讓多行的模板更易讀。它們在 IE 下并沒有被支持,所以如果你需要在不 (經過 Babel 或 TypeScript 之類的工具) 編譯的情況下支持 IE,請使用折行轉義字符取而代之
### 監聽子組件事件
#### 使用事件拋出一個值
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS