Vueのカスタムコンポーネント

　　HTML：

：メッセージ=「btn.sureは」========「これは小道具に適用されます

{{}} Btn.sure ===========「このスロットのスロットで使用

1  < NEL-BTN クラス= "VuePrimaryBtn" ：MSG = "btn.sure" > {{btn.sure}} </ NEL-BTN > 
2  < NEL-BTN クラス= "VueDangerBtn" ：MSG = "btn.delete" @ click.native = AA '（）' > {{btn.delete}} </ NEL-BTN > 
3  < NEL-BTN クラス= "VueWarningBtn" ：MSG = "btn.warn" > {{}} btn.warn </ NEL-BTN > 
4  <NEL-BTN クラス= "VueSuccessBtn" ：MSG= "btn.ok" > {{btn.ok}} </ NEL-BTN >

　　

　　JS：

　　

1つの // グローバル成分：
2       Vue.component（ 'NEL-BTN' 、{
 3。     // テンプレート： '<Buttonクラス= "VueDefaultBtn"> の<slot> </スロット> </ button>の' //スロットモード、HTML直接サブアセンブリMSG} {} { 
4。      テンプレート： '<Buttonクラス= "VueDefaultBtn"> {{MSG}} </ボタン>'、// 小道具の実施形態では、HTMLのサブアセンブリ：MSG = "btn.ok"; 
5。     小道具：{ 
 6 MSG：{タイプ：文字列} 
 。} 7 
。8  }）
 。9  
10  
11。 // サブアセンブリ：
12である  VARアプリ= 新しい新しいヴュー（{
 13が          "#app"：EL、
 14          データ：{
15              リスト：[]、
 16              BTN：{ 
17確か： "OK"、
18は削除され、 "削除"、
19ザは警告： "警告"、
20はOKである： "成功" 
21である} 
22れる         }、
 23れる         （搭載）{
 24  
25          } 、
 26は、         方法：{
 27              AA（）{
 28                  にconsole.log（33333 ）;
 29              }
 30          }
 31です      }）

　　カスタムコンポーネントは、開始、イベントが動作しない]をクリック   する@ click.nativeを