Vue自定義元件

元件（component）是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的**。在較高層面上，元件是自定義元素， vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生 html 元素的形式，以 is 特性擴充套件。

註冊分為兩種：區域性註冊和全域性註冊。

註冊乙個全域性元件，可以使用vue.component(tagname, options)。把建構函式註冊到my-component這個 id vue.component(『my-component』, mycomponent)，為了寫法更簡單，也可以直接傳入 option 物件來代替建構函式，vue.component() 會為你隱式呼叫 vue.extend() 。

// 註冊全域性元件,指定之前設定的元素名,然後傳入物件

vue.component('my-component', )

之後就能在父級例項的模板中使用註冊過的元件了 (務必在初始化根例項之前註冊元件)

我們沒有必要，也不應該全域性註冊所有元件。你可以限制乙個元件僅對另乙個元件及其後代可用，只要在另乙個元件的 components 選項中傳入這個元件即可。

import header from './components/header/header.vue';
export default ,
components: 
};

data 必須是函式。因為如果不是函式的，宣告多個元件的時候，他們共享的就是同乙個data，這樣就會亂掉。如果通過函式返回，那麼每個元件維持自己的data作用域。該data屬性只在其component中可見。

元件例項的作用域是孤立的,元件和元件之間，即使有同名屬性，值也不共享。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。

vue.component('child', }'
})

需要注意的是html 特性是不區分大小寫的。所以，當使用的不是字串模版，camelcased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名，這點在angularjs的指令中也一樣。

vue.component('child', }'
})

在vue2.0中prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop 。如果你這麼做了，vue 會在控制台給出警告。這點官方文件給出了明確的說明和解決辦法。

vue2.0 自定義元件初體驗

Vue自定義元件

Vue 自定義元件

Vue 自定義元件

vue 元件自定義

Vue自定義元件

Vue 自定義元件

Vue 自定義元件

vue 元件自定義

相關推薦