Events VUE:如果子级发出事件,则在父级中进行更改

Events VUE:如果子级发出事件,则在父级中进行更改,events,vuejs2,vue-component,emit,Events,Vuejs2,Vue Component,Emit,具有以下vue结构: <!-- Parent Component --> <div v-for="item in items"> <h1>{{item.title}}</h1> <!-- this is my target button --> <button></button> <child :parentid="item.id"/>

具有以下vue结构:

<!-- Parent Component -->
    <div v-for="item in items">
       <h1>{{item.title}}</h1>
        <!-- this is my target button --> 
       <button></button>
       <child :parentid="item.id"/>
    </div>

<!-- Child Component-->
    <div v-for="subitem in subitems">
      <h2>{{subitem.title}}</h2>
       <button v-on:click="delete(subitem.id)" v-on:update-parent-button="howToDo()" >delete</button>
    </div>

如何在不太努力的情况下针对正确的父元素实现这一点首先,我相信一个示例可以满足您的要求:

const Child={
模板:`
{{subitem.title}}
删除
`,
道具:['parentid'],
数据(){
返回{
分项:[
{标题:'子项目a',id:6},
{标题:'子项b',id:7}
]
}
},
方法:{
删除项目(id){
this.subitems=this.subitems.filter(item=>item.id!==id)
}
},
观察:{
“subitems.length”:{
立即:是的,
处理程序(newLength){
此.$emit('update-subitem-count'{
id:this.parentid,
计数:newLength
})
}
}
}
}
新Vue({
el:“#应用程序”,
组成部分:{
小孩
},
数据(){
返回{
hasSubitems:{},
项目:[
{标题:'项目A',id:1},
{标题:'项目B',id:2},
{标题:“项目C”,id:3}
]
}
},
方法:{
onSubitemChange({count,id}){
this.$set(this.hasSubitems,id,count>0)
}
}
})

{{item.title}
目标按钮

父组件是否也可以访问子组件中的子项?子组件从何处获取子项?如果是这种情况,您甚至不需要依赖监视程序和事件侦听器,而只需要一个简单的计算属性。子组件在传递的prop
:parentid
函数中获取数据子项。ajax请求位于子项的子组件中感谢这个经过验证的答案它帮助我更好地了解vue父子组件
watch: {
     subitems(newValue, oldValue) {
                this.$emit('update-parent-button', ('test', newValue.length))
            }
        },