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


相关推荐

  • CSS 鼠标样式「建议收藏」

    CSS 鼠标样式「建议收藏」巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下:任意标签中插入style=”cursor:*” 例子:文本或其它页面元素 文本或其它页面元素 注意把*换成如下15个效果的一种:下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!hand是手型   例子:CSS鼠标手型效果 CSS

    2022年5月6日
  • 防火墙OPNsense安装「建议收藏」

    防火墙OPNsense安装0.前言下载链接:https://opnsense.org/download/下载镜像,安装到虚拟机里。1.安装配置要求,需要两个网络适配器,一个外网,一个内网(也就是一个局域网,一个广域网)启动后,让页面自启,等到有倒计时的页面时,有5秒的倒计时自动检测,这里不要自动检测,直接回车对广域网wan和局域网lan进行命名wan:le0lan:le1OPNsense进入了LiveDemo模式,这时如果你用root登陆,所有的功能都支持,但所有的存储

    2022年4月5日
  • RapidXml使用方法

    RapidXml使用方法一、写xml文件#include#include”rapidxml/rapidxml.hpp”#include”rapidxml/rapidxml_utils.hpp”#include”rapidxml/rapidxml_print.hpp”usingnamespacerapidxml;intmain(){ xml_document<>doc;

    2022年7月17日
  • 23种设计模式对应应用场景

    23种设计模式对应应用场景

    2021年10月2日
  • qtcpsocket 客户端_qtcpsocket接收结构体数据

    qtcpsocket 客户端_qtcpsocket接收结构体数据实现tcp客户端通信并支持keepAlive探测包#pragmaonce#include<QObject>#include<QTcpSocket>/***********************************************作者:wujianhua*时间:2021/02/25*类介绍:sockettcp客户端通信类************************************************/classT.

    2022年9月9日
  • Android ROM 制作教程

    Android ROM 制作教程

    2021年12月7日

发表回复

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

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