vue自定义组件及定义插槽
vue自定义组件绑定事件：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义组件绑定事件</t
·
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">
Vue.component("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">
Vue.component('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='http://www.baidu.com'>{{name}}</mybtn1>
</div>
<script type="text/javascript">
Vue.component('mybtn',{
template:
`
<div>
<slot>确定</slot>
</div>
`
})
Vue.component('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>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)