Vue 自定义组件

　　html：

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

{{btn.sure}}===========》这种使用于slot插槽

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

　　

　　js：

　　

//全局组件：
     Vue.component('nel-btn', {
    // template: '<button class="VueDefaultBtn"><slot></slot></button>'//slot方式，html子组件直接{{msg}}
    template: '<button class="VueDefaultBtn">{{msg}}</button>',//props方式，html子组件:msg="btn.ok";
    props:{
 6         msg:{type:String}
 7     }
})


//子组件：
 var app = new Vue({
        el: "#app",
        data: {
            list: [],
            btn:{
17                 sure:"确定",
18                 delete:"删除",
19                 warn:"警告",
20                 ok:"成功"
21             }
        },
        mounted() {

        },
        methods: {
            aa(){
                console.log(33333);
            }
        }
    })

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