<div id="app">
<cpn1 @chuansong="cpnClick"></cpn1>
<!--在父组件中绑定点击事件,这里绑定的是自定义事件,名字要是 @子方法名字 = "父方法名字"-->
</div>
<template id="cpn1">
<!--<h1 >{{one}}</h1>-->
<div>
<!--给子组件的内容绑定事件-->
<button v-for="item in person" @click="btnClick">{{item.name}}</button>
</div>
</template>
<script>
const cpn1 = {
template : '#cpn1',
//值绑定
//props: ['one']
data(){
return {
person: [
{id : 'zhangsan',name : 'zhanghsan'},
{id : 'lisi',name :'lisi'}
]
}
},
//第一是在子组件内写好click事件,用 this.$emit()去发射给父组件,
methods: {
btnClick(item){
console.log(item);
this.$emit('chuansong',item)
}
}
}
const app = new Vue({
el: '#app',
data: {
hobbies:['1','2','3'],
},
components:{
cpn1 : cpn1
},
methods: {
//父组件接收子组件发射的请求
cpnClick(item){
console.log('1111'+item)
}
}
})
</script>
vue子组件向父组件传值的问题
最新推荐文章于 2023-05-29 10:07:41 发布