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
原文地址:https://www.cnblogs.com/nelsonlei/p/11634935.html
时间: 2024-10-29 11:01:43