Vue组件传值

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_33872566

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/u/2251646/blog/1477128

本文详细介绍Vue.js中组件的创建及使用流程，包括组件间的数据传递方式，并演示如何通过HTTP请求获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1.先定义一个组件（hearder.vue）

<template>
    <div>
   
    </div>
</template>

<script>
export default {}
</script>

<style>
</style>

2.在app.vue中声明使用hearder.vue组件

<template>
    <v-hearder><v-hearder>
</template>

<script>
import hearder from './components/hearder/hearder'

export default {
    components:{
      "v-hearder":hearder
    }
}

</script>

3.获取数据

// 使用http网络请求 则需要使用vue-resource组件
// 先在package.json中的dependencies里面增加 "vue-resource":"^1.3.4"（这是最新版本）【node服务下】
// main.js文件中需要增加：import VueResource from 'vue-resource' 与 Vue.use(VueResource)
// 然后在node命令框中执行：npm install与npm run dev两个命令，项目中就引用了vue-resource组件
// 若是本地简单使用则只需要导入vue-resource.js文件库就可以了


export default {
   data(){
       return {
         seller:{}  // 接收的获取数据属性名
     }
  },
   created(){
     this.$http({method:"GET",url:"/api/seller"}).then(function(res){
          this.seller=res.data; // 接收数据并设置值
      },function(error){})
   }
}

4.父组件标签传值

<!-- 其实是使用 vue中的props进行组件参数的传递 -->
<!-- 参数必须赢v-bind指令进行绑定操作，不然子组件接收不到父组件传值 -->
<!-- 若想详细了解props使用，请访问vue社区阅读其API说明 -->

<v-hearder v-bind:seller="seller"></v-hearder>

5.子组件接收参数

<template>
    <div>
        <img :src="seller.avatar">
    </div>  
</template>

<script>
// props 支持的参数类型有：Number、Boolean、String、Object、Function、Array、Symbol
  export default {
      props:{
        seller:{
            type:Object
         }
     }
  }
</script>

转载于:https://my.oschina.net/u/2251646/blog/1477128