Vue 自定义组件

Posted 2023-01-04 nelsonlei

　　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