vue 父组件调用子组件的函数_vue父组件调用子组件属性

vue 父组件调用子组件的函数_vue父组件调用子组件属性第一种方法直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div></template><script>importchildfrom’./components/dam/…

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

Jetbrains全系列IDE稳定放心使用

第一种方法

直接在子组件中通过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>

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

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

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

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

(0)


相关推荐

  • CentOS8 Docker 端口映射

    CentOS8 Docker 端口映射概念端口映射:端口映射就是将内网中的主机的一个端口映射到外网主机的一个端口,提供相应的服务。当用户访问外网IP的这个端口时,服务器自动将请求映射到对应局域网内部的机器上。例:我们在内网中有一台Web服务器,但是外网中的用户是没有办法直接访问该服务器的。于是我们可以在路由器上设置一个端口映射,只要外网用户访问路由器ip的80端口,那么路由器会把自动把流量转到内网Web服务器的80端口上。使用使用:dockerrun–namecontainer-name:tag-d-p服务器端口:Doc

    2022年10月18日
  • 解决SecureCRT中文显示乱码

    解决SecureCRT中文显示乱码

  • Java面试之异常[通俗易懂]

    Java面试之异常[通俗易懂]Java面试之异常

  • Java标识符规范

    Java标识符规范?标识符标识符是我们给变量、类、方法等取的名字。取名规则:1.标识符中可以包含字母(中文)、下划线、美元符$、数字,不能包含其他符号2.标识符不能以数字开头3.标识符不能是关键字命名建议:1.类名,每个单词的首字母大写(大驼峰)例如:MyFirstApp,TestApp等2.方法名,首字母小写,后面每个单词开头大写例如:getHttpMessage(),localValue等3.变量名,和方法名规则一样。4.常量命名全部大写,每个单词间下划线分开5.字定义的标识符在命名时,使用尽

  • TranslateMessage函数 (转)「建议收藏」

    TranslateMessage函数 (转)「建议收藏」TranslateMessage是用来把虚拟键消息转换为字符消息。由于Windows对所有键盘编码都是采用虚拟键的定义,这样当按键按下时,并不得字符消息,需要键盘映射转换为字符的消息。TranslateMessage函数用于将虚…

  • tar 打包压缩命令

    tar 打包压缩命令tar命令用于文件的打包或压缩,是最为常用的打包压缩命令,其语法格式如下:tar[选项]文件名.tar.gz源文件tar-cvfzxxx.tar.gzsource_file(tar-cvfz包名.tar.gz源文件)#以tar.gz方式打包并gz方式压缩tar-xvfzxxx.tar.gz-Cpath(tar-xvfzxxx.tar.gz-C目标路径)#解压缩包注意:使用tar命令,打包仅仅是打包xxx.tar,打包

发表回复

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

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