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
