vue自定义组件绑定事件：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义组件绑定事件</title><script src="vue.min.js"></script></head><body><div id="app"><whpython v-for="book in books" :liuwei="book" @liu="checkChanged"></whpython><h6>选中的内容为</h6><div v-for="se in selected_books">{{ se.title }}</div></div><script type="text/javascript">ponent("whpython",{props:{liuwei:{type:Array,required:true,}},template:`<div><span>{{ liuwei.title }}</span><input type="checkbox" @click="yourCheck"/></div>`,methods:{yourCheck(){this.$emit("liu",this.liuwei) //把选中的子组件对象通过this.$emit//传给父组件的 方法checkChanged} }})new Vue({el:"#app",data:{books:[{id:1,title:'金平媒',},{id:2,title:'鬼谷子',},],selected_books:[]},methods:{checkChanged(book){let index = this.selected_books.indexOf(book)if(index>=0){this.selected_books.splice(index,1)}else{this.selected_books.push(book)}}}})</script></body></html>
vue自定义组件：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义组件v-model</title><script src="vue.min.js"></script></head><body><div id="app"><stepcount v-model="countnumer"></stepcount></div><script type="text/javascript">ponent('stepcount',{props:{count:{}},template:`<div><button @click="moves">-</button><span>{{count}}</span><button @click="add">+</button></div>`,methods:{moves(){this.$emit("countchange",this.count-1)},add(){this.$emit("countchange",this.count+1)}},model:{event:'countchange',prop:"count",}})new Vue({el:"#app",data:{countnumer:0},})</script></body></html>
vue自定义组件定义插槽：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义组件定义插槽</title><script src="vue.min.js"></script></head><body><div id="app"><mybtn1 url=''>{{name}}</mybtn1></div><script type="text/javascript">ponent('mybtn',{template:`<div><slot>确定</slot></div>`})ponent('mybtn1',{props:{url:{}},template:`<div><a :href="url">湖北</a><slot>这是插槽的默认值</slot></div>`,data:function(){return {name:'湖北武汉Python'}}})new Vue({el:"#app",data:{name:'湖北人' },})</script></body></html>
如果觉得《vue自定义组件及定义插槽》对你有帮助，请点赞、收藏，并留下你的观点哦！
