Vue 自定义组件

　　html：

:msg="btn.sure"========》这种适用于props

{{btn.sure}}===========》这种使用于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 //全局组件：
 2      Vue.component('nel-btn', {
 3     // template: '<button class="VueDefaultBtn"><slot></slot></button>'//slot方式，html子组件直接{{msg}}
 4     template: '<button class="VueDefaultBtn">{{msg}}</button>',//props方式，html子组件:msg="btn.ok";
 5     props:{
 6         msg:{type:String}
 7     }
 8 })
 9 
10 
11 //子组件：
12  var app = new Vue({
13         el: "#app",
14         data: {
15             list: [],
16             btn:{
17                 sure:"确定",
18                 delete:"删除",
19                 warn:"警告",
20                 ok:"成功"
21             }
22         },
23         mounted() {
24 
25         },
26         methods: {
27             aa(){
28                 console.log(33333);
29             }
30         }
31     })

　　自定义组件，click事件不起作用，得用  @click.native