組件（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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151752.html
標籤：JavaScript