組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。 註冊一個全局組件語法格式如下： Vue.component(tagName, options) tagName 為組件名，options 為配置選項。註冊後，我們可以使用以下方式來調用組件 ...
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。
註冊一個全局組件語法格式如下：
Vue.component(tagName, options)
tagName 為組件名，options 為配置選項。註冊後，我們可以使用以下方式來調用組件：
<tagName></tagName>
1.全局組件：
所有實例都能用全局組件
<div id="app"> <aaa></aaa> <aaa></aaa> </div> <script> Vue.component('aaa',{ template:'<h1>自定義組件!</h1>' }) new Vue({ el:'#app' }) </script>
2.局部組件：
在實例選項中註冊局部組件，這樣組件只能在這個實例中使用
<div id="app"> <cc></cc> </div> <script type="text/javascript"> var Child = { template: '<h1>自定義組件!</h1>' }; new Vue({ el:'#app', components:{ 'cc':Child } }) </script>
3.參數：props
傳遞參數給組件
<body> <div id="app"> <aaa mess="abcd"></aaa> <aaa></aaa> </div> <script> Vue.component('aaa',{ props:['mess'], template:'<h1>---{{mess}}----</h1>' }) new Vue({ el:'#app' }) </script> </body>
4.動態參數
<div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 註冊 Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實例中像 “this.message” 這樣使用 template: '<span>{{ message }}</span>' }) // 創建根實例 new Vue({ el: '#app', data: { parentMsg: '父組件內容' } }) </script>
