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


相关推荐

发表回复

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

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