vue子组件向父组件传值的三种方式_vue子组件修改父组件值

vue子组件向父组件传值的三种方式_vue子组件修改父组件值如需了解老子怎么控制儿子的,传送门:子组件child.vue<template><div><button@click=”$emit(’emit’,’方式1:传参给父组件第1个参数’,’方式1:传参给父组件第2个参数’,’…’)”>方式1:通过emit传参给父组件(推荐此方式)</button><button@click=”emit(‘方式2:传参给父组件第1个参数’,’方式2…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

 如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 

子组件child.vue 

<template>
  <ul>
    <li> <button @click=" $emit( 'emit', '方式1:传参给父组件第1个参数', '方式1:传参给父组件第2个参数', '...' ) " > 方式1:用$emit传参给父组件(推荐此方式) </button> </li> <br /> 
    <li> <button @click=" emit( '方式2:传参给父组件第1个参数', '方式2:传参给父组件第2个参数', '...' ) " > 方式2:用props属性传进来的函数(方法Function)传递值给父组件 </button> </li> <br /> 
    <li> <button @click=" $parent.emit( '方式3:传参给父组件第1个参数', '方式3:传参给父组件第2个参数', '...' ) " > 方式3:用$parent.functionName调用父组件的方法(不推荐,需要依赖父组件初始化完毕该方法) </button> </li> <br /> 
    <li> <button @click=" inject_emit( '方式4:传参给父组件第1个参数', '方式4:传参给父组件第2个参数', '...' ) " > 方式4:用inject关联父组件provide的方法(这种方式比较生僻,子孙组件都可以直接调用,适用于层级较深的组件关系) </button> </li> <br /> 
    <li> <button @click=" window_emit( '方式5:传参给父组件第1个参数', '方式5:传参给父组件第2个参数', '...' ) " > 方式5:用window的全局方法(此方式属于直男模式,呵呵~) </button> </li> <br /> 
  </ul>
</template> 
<script>
export default {
  inject: ["inject_emit"], //注入方法(子孙组件均可直接调用)
  props: ["emit"], //传入方法
  methods: {
      window_emit(v1,v2,v3){
            window.emit(v1,v2,v3)
      }
  }
};
</script>

父组件father.vue

<template>
  <div>
    <child @emit="emit" :emit="emit"></child>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  created() {
    window.emit = this.emit;//声明全局方法(直男模式)
  },
  provide() {    
    return {
      inject_emit: this.emit,//在这里对外提供方法,在子孙组件中都可以调用
    };
  },
  methods: {
    emit(v1, v2, v3) {
      alert(`${v1}\n${v2}\n${v3}`); //弹出子组件的传参
    },
  },
};
</script>

vue子组件向父组件传值的三种方式_vue子组件修改父组件值

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186798.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 静态网站(博客)生成器(Static-Site-Generators)

    静态网站(博客)生成器(Static-Site-Generators)一.介绍静态网站生成器到底有多少呢?GitHub用户对静态博客生成程序进行了大规模总结,太多了啊,太恐怖,萌新被吓傻了……GitHub地址:https://github.com/pinceladasdaweb/Static-Site-Generators我选了jekyll博客,因为两大代码仓库GitHub(国外)和Coding(国内)都提供免费空间自动构建Jekyll网站!我的…

  • CentOS7安装MySQL8.0.12(mysql8版本有的地方还是有坑想好再用)

    CentOS7安装MySQL8.0.12(mysql8版本有的地方还是有坑想好再用)

  • tomcat7官网下载

    tomcat7官网下载1.官网地址:tomcat.apache.org,进入后点击Tomcat72.选择不同的类型,以“64-bitWindowszip”为例3.保存文件,确定4.解压后,进入bin目录,双击startup.bat,出现下图5.打开浏览器,输入127.0.0.1:8080,出现下图,安装成功转载于:https://my.oschina.net/u/4052883/blog/29915522…

  • Java volatile关键字作用[通俗易懂]

    Java volatile关键字作用[通俗易懂]当一个共享变量被volatile修饰时,它会保证修改的值立即被更新到主存“,这里的”保证“是如何做到的?和JIT的具体编译后的CPU指令相关吧?  volatile特性  内存可见性:通俗来说就是,线程A对一个volatile变量的修改,对于其它线程来说是可见的,即线程每次获取volatile变量的值都是最新的。  volatile的使用场景  通过关键字sychronize…

  • excel vba 解密

    excel vba 解密PrivateSubVBAPassword()’你要解保护的Excel文件路径Filename=Application.GetOpenFilename(“Excel文件(*.xls&*.xla&*.xlt),*.xls;*.xla;*.xlt”,,”VBA激活成功教程”)IfDir(Filename)=””ThenMsgBox”没找到相关文件,清重新设置。”

  • 如何在firefox 7的地址栏里显示http://前缀

    如何在firefox 7的地址栏里显示http://前缀

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号