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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 线程池和队列学习,队列在线程池中的使用,什么是队列阻塞,什么是有界队列「建议收藏」

    线程池和队列学习,队列在线程池中的使用,什么是队列阻塞,什么是有界队列「建议收藏」线程池和队列学习,队列在线程池中的使用,什么是队列阻塞,什么是有界队列

    2022年4月24日
    62
  • javacv学习之实现matlab中imfill算法(孔洞填充)

    javacv学习之实现matlab中imfill算法(孔洞填充)因生产需要计算图像的面积,首先第一步就是要先将图像中有洞的地方给它填上,网上找了半天说是matlab中的imfill算法就能直接填上,但我对matlab也不熟也不想用它,结果网上搜资料看看到很多C++的博主写的可以直接用opencv搞定,我一想opencv能搞定那肯定javacv也能搞,所以就有了下面的内容。废话不多说直接上代码publicstaticvoidmain(String[]args){System.loadLibrary(Core.NATIVE_LIBRAR

    2022年9月2日
    6
  • mac dg破解激活码-激活码分享2022.02.22

    (mac dg破解激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlHCIQ56F36O-eyJsaWNlbnNlSW…

    2022年4月1日
    58
  • 牛客网–密码翻译

    牛客网–密码翻译

    2021年5月18日
    155
  • SpringBoot2-[SpringBoot优缺点、微服务理解、版本仲裁]

    SpringBoot2-[SpringBoot优缺点、微服务理解、版本仲裁]??‍?博主介绍:大家好,我是芝士味的椒盐,一名在校大学生,热爱分享知识,很高兴在这里认识大家??擅长领域:Java、大数据、运维、电子??如果本文章各位小伙伴们有帮助的话,?关注+??点赞+?评论+?收藏,相应的有空了我也会回访,互助!!!?另本人水平有限,旨在创作简单易懂的文章,在文章描述时如有错,恳请各位大佬指正,在此感谢!!!文章目录Spring.ioSpring5重大升级SpringBoot优点SpringBoot缺点微服务SpringBoot官方文档Maven设置SpringBo..

    2022年9月26日
    2
  • python安装numpy后pycharm导入不了_如何导入numpy

    python安装numpy后pycharm导入不了_如何导入numpypycharm安装好后numpy的导入pipinstallnumpy使用pip命令在dos环境下出现平台不支持,python版本太高,numpy不匹配,刚开始下的3.7的最新版,重新下载3.6的版本,安装成功。python安装的时候自己选择路径,勾选自动配置环境变量,默认安装路径在一个隐藏的文件夹temp里面,临时文件,容易系统清除。配置项目解释器,将py

    2022年8月26日
    6

发表回复

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

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