子组件修改父组件值

最新推荐文章于 2024-05-10 22:30:00 发布

前端学习机

最新推荐文章于 2024-05-10 22:30:00 发布

阅读量171

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_52608028/article/details/113758013

vue 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在Vue.js中如何通过父子组件通信实现子组件修改父组件的状态。首先介绍了如何在父组件中注册并使用子组件，接着详细说明了子组件如何通过事件触发来改变其父组件的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件引入子组件
import userInfo from '@/components/user/userInfo.vue'
注册子组件

export default {
  components: {
    userInfo,//子组件注册
  },
  data(){
    return{
      popup:false,//用到的变量
    }
  },
  methods:{
  //父组件中接收子组件的值res
    updatePopup(mypopup){
      this.popup=mypopup
    },
  },
}

父组件注册完成子组件后，html使用注册完的子组件

<user-info :popup='popup' @successPopup='updatePopup'></user-info>

子组件

 <div class="user" v-show="popup" @click="close()">
      <div class="user-more" @click.stop="closestop()">...</div>
 </div>

子组件更改popup值

//更改popup值
      close(){
          this.$emit("successPopup", false);//调用父组件函数，并传值
      },
      closestop(){
          this.$emit("successPopup", true);//调用父组件函数，并传值
      },