Vue custom components

　　html：

: Msg = "btn.sure" ======== "This applies to props

{{Btn.sure}} =========== "used in this slot Slot

1 <nel-btn class="VuePrimaryBtn" :msg="btn.sure">{{btn.sure}}</nel-btn>
2 <nel-btn class="VueDangerBtn" :msg="btn.delete" @click.native='aa()'>{{btn.delete}}</nel-btn>
3 <nel-btn class="VueWarningBtn" :msg="btn.warn">{{btn.warn}}</nel-btn>
4 <nel-btn class="VueSuccessBtn" :msg="btn.ok">{{btn.ok}}</nel-btn>

　　

　　js：

　　

1  // global components: 
2       Vue.component ( 'NEL-BTN' , {
 . 3      // Template: '<Button class = "VueDefaultBtn"> <slot> </ slot> </ Button>' // slot mode, html direct subassembly MSG} {} { 
. 4      Template: '<Button class = "VueDefaultBtn"> {{MSG}} </ Button>', // The props embodiment, html subassembly: MSG = "btn.ok"; 
. 5      The props : { 
 . 6 MSG: {type: String} 
 . 7} 
. 8  })
 . 9  
10  
. 11  // subassembly: 
12 is   var App = new new Vue ({
 13 is          EL: "#app",
14         data: {
15              List: [],
 16              BTN: { 
. 17 Sure: "OK", 
18 is Delete: "Delete", 
. 19 The warn: "Warning", 
20 is OK: "Success" 
21 is} 
22 is          },
 23 is          Mounted () {
 24  
25          } ,
 26 is          Methods: {
 27              AA () {
 28                  the console.log (33333 );
 29              }
 30          }
 31 is      })

　　Custom components, click event does not work, starting   @ click.native