Vue点击调用组件以及调用事件
文章描述：
Vue点击调用组件以及回调事件方法
vue
<template>
<div>
<div v-for="(item,index) in list" :key="index" @click="ck(index)">
{{item.id}}
<inputui v-if="item.has" :inputText="inputText" @check="btn"></inputui>
</div>
</div>
</template>
<script>
import inputui from '@/components/input';
export default {
components:{
inputui
},
data(){
return{
list:[
{id:1,has:false},
{id:2,has:false},
{id:3,has:false}
],
inputText:''
}
},
created() {
},
methods:{
// 组件回调事件
btn(val){
console.log(val)
},
// 点击事件
ck(index){
// console.log(index)
this.list.forEach((item,index)=>{
item.has = false
})
this.list[index].has = true
this.inputText = this.list[index].id
}
}
}
</script>
<style>
</style>
组件
<template>
<div class="container">
<div class="item" @click="click">
<input type="text" v-model="text"/>
</div>
</div>
</template>
<script>
export default{
props:{
inputText:{
type:[Number,String],
default:''
}
},
data(){
return{
text:this.inputText
}
},
methods:{
click(){
let str = 123;
this.$emit('check',str)
}
}
}
</script>
<style>
.item{
background: #eee;
padding: 10px 10px;
}
</style>
发布时间：2023/06/01
发表评论