vue中 父组件向子组件传值案例讲解「建议收藏」

vue中 父组件向子组件传值案例讲解「建议收藏」父组件向子组件传值通过父组件传值调用子组件显示不同的数据

大家好,又见面了,我是你们的朋友全栈君。

父组件向子组件传值
通过父组件传值调用子组件显示不同的数据

父组件 :conponent.vue
子组件:iconponent.vue

父组件

<template>
  <div>
     <span>父组件</span>
     <icomponent-box :id="this.id"></icomponent-box>
  </div>
</template>
<script>
//导入子组件
import icomponent from './icomponent.vue';
export default {
  data () {
    return {
      id:12
    }
  },
  components:{  //用来注册子组件的节点
      "icomponent-box": icomponent
  }
}
</script>
<style>
</style>

子组件

<template>
  <div>子组件</div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
 methods:{
   getComponents(){
        this.$http.get("api/getcomponents/" + this.id);
    }
 },
 props: ["id"]  //接收父组件传递过来的id值
}

</script>

更多参考:https://blog.csdn.net/lander_xiong/article/details/79018737

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134872.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • php 编译安装curl 扩展

    php 编译安装curl 扩展问题:线上运行的lamp服务器,默认yum安装的curl模块只支持http,不支持https。解决方法:编译安装curl,重新编译php,使php的curl模块支持https。具体步骤:1、下载curlcd/usr/local/src#进入安装包存放目录wgethttp://curl.haxx.se/download/curl-7.44.0.tar.gz#下载2、安装curlcd/usr/local/srctarzxvfcurl-7.44.0.tar..

    2025年11月11日
    4
  • 查看进程运行在哪个cpu_鲲鹏980CPU

    查看进程运行在哪个cpu_鲲鹏980CPU前言最近用华为鲲鹏跑了一段时间服务后,出现了系统负载40多居高不下的情况,一排查发现是kworker进程占用CPU很高,而且还杀不掉。通过华为的监控发现是磁盘I/O很高,重启服务器后能短暂解决问题,但是过几天负载还是会很高,导致很多进程被系统杀死。但是出现问题的就一台鲲鹏,其他的鲲鹏没有出现,通过比较发现内核版本不一样,执行uname-a输出如下正常的鲲鹏Linuxkpv7-pbx-00014.18.0-80.7.2.el7.aarch64#1SMPThuSep1216:1

    2025年12月10日
    3
  • HSQL入门_js 数据库

    HSQL入门_js 数据库HSQLDBHibernateSQLServerJDBCWeb 一、简介: hsql数据库是一款纯Java编写的免费数据库,许可是BSD-style的协议。 相对其他数据库来说,其体积小,才563kb。 仅一个hsqldb.jar文件就包括了数据库引擎,数据库驱动,还有其他用户界面操作等内容。 下载地址:http://hsqldb.org/二、使用hs

    2022年9月22日
    3
  • ubuntu 安装教程(2016年qq版本v6.3.6)

    1、ctri+alt+t打开控制台2、输入:sudoadd-apt-repositoryppa:ubuntu-wine/ppa这是添加wine的库,照提示按回车添加稍等一下3、更新新软件中心输入:sudoapt-getupdate等待更新完毕后输入:sudoapt-getinstallwine1.7

    2022年4月17日
    34
  • eplan激活码破解步骤win10【2021.7最新】

    (eplan激活码破解步骤win10)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~MLZP…

    2022年3月21日
    1.4K
  • jQuery操作复选框checkbox技巧总结 —- 设置选中、取消选中、获取被选中的值、判断是否选中等…

    jQuery操作复选框checkbox技巧总结 —- 设置选中、取消选中、获取被选中的值、判断是否选中等…

    2021年11月8日
    276

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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