首页 > 其他分享 >vue父子组件通信

vue父子组件通信

时间:2023-05-24 13:34:27浏览次数:45  
标签:vue methods default fatherMethod 父子 export child 组件

 

一:在子组件中通过this.$parent.event来调用父组件的方法

父组件:

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件:

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

 

 二:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件

父组件:

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件:

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

三:父组件把方法传入子组件中,在子组件里直接调用这个方法

父组件:

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件:

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>


<template>
  <div>
    <button @click="fatherMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {}
  };
</script>

 

原文:https://blog.csdn.net/Leon_940002463/article/details/103406103

 

标签:vue,methods,default,fatherMethod,父子,export,child,组件
From: https://www.cnblogs.com/vichin/p/17428043.html

相关文章

  • vue自动导入组件和自动导入类库 api
    vue3项目中,使用vue常用的api比如vuex的api或者ref,reactive等,以及导入多个自定义组件、UI组件库的组件,都需要反复的手动导入,注册,很是影响开发体验,这里推荐antfu开源的两个插件,上链接:自动导入组件https://github.com/antfu/unplugin-vue-components自动导入类库a......
  • windows环境下的vue部署(使用nginx)
    首先需要将vue项目打包成dist,在需要部署的服务器上进行解压然后我们使用nginx进行反向代理设置,具体操作如下打开解压后的nginx,进入目录:nginx-1.23.4->conf,打开编辑nginx.conf*注意:对于后端路径的映射这里一定是^~/前缀/对应于地址的端口/前缀/,这里一定是两个//包裹。以下......
  • vue2子组件切换,监听方法失效(监听多个字段)
    记录下问题本来是在父页面上放了多个子组件,利用单选按钮控制每个组件,选择了某个按钮,设置该组件控制字段为true,例如v-if="component"来控制销毁创建,根据component=true或者flase来控制子组件创建或者销毁后来发现子组件切换时,监听不生效,监听方法也加了immediate=true,当几个按钮......
  • vue中<script setup>中使用watch、computed、props、defineExpose、defineEmits等方法
    <scriptsetup>是在单文件组件(SFC)中使用组合式API的编译时语法糖。相比于普通的<script>语法,它具有更多优势:更少的样板内容,更简洁的代码。能够使用纯TypeScript声明props和抛出事件。更好的运行时性能(其模板会被编译成与其同一作用域的渲染函数,没有任何的中间......
  • vue this.$set的作用
    在Vue.js中,this.$set是一个用于在Vue实例中设置响应式属性的方法。它允许您在不重新创建整个对象的情况下添加新的响应式属性。Vue.js通过观察对象的属性来追踪其变化,从而实现数据的响应式。然而,当您添加一个新的属性时,Vue无法自动追踪该属性的变化。这就是this.$set方法派上用场......
  • 基于springboot+vue数码论坛系统设计与实现、论坛管理系统,附源码+数据库+lw文档+PPT
    1、项目介绍考虑到实际生活中在数码论坛方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。(1)系统功能需求登录系统后,主要模块包括首页、数码板块、数码评价、数码论坛、畅聊板块、新闻资讯、个人中心、后台管理等功能。系统功能用例图如图3-1所示......
  • 解析 Pinia 和 Vuex
     Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。既然我们要对比两者的实现......
  • sentinel(阿里巴巴开源的一款微服务流量控制组件)
    sentinel:分布式系统的流量防卫兵:以流量为切入点,从流量控制、熔断降级、系统负载均衡保护等多个维度保护服务的稳定性sentinel分为两部分:核心库:不依赖任何框架/库,可以运行在所有的java环境,且对Dubbo/springcloud等框架也有较好支持控制台:基于springboot开发,打包后可以直接运......
  • element-plus 组件样式修改
    el-form-item间距.el-form-item{margin-bottom:3px;}Elmessage消息换行/*失败消息*/.el-message--error{white-space:pre-line}/*成功消息*/.el-message--success{white-space:pre-line}......
  • 我的第一个项目(十三) :组件间传值的一些方案(vuex,eventbus,localStorage)
    好家伙, 先说一下我的需求,我要组件间传值 1.eventBus前端兄弟组件传值eventbus无法使用不报错也不触发,就很奇怪//eventBus.jsimportVuefrom"vue";exportdefaultnewVue();//Mylogin.vue<buttontype="button"class="btnbtn-primary"@click="login&quo......