第四篇 Vue3中传递参数到组件

1、背景说明

       在开发vue项目中，从后台服务器获取数据然后在vue组件中进行展示是最常见的场景，我们简单说一下如何将参数传递到vue组件中。

2、组件简介

     vue官方说，组件是带有名称的可复用实例。其实就像我们自定义函数一样，就是增加程序的复用性，增加程序的简洁性。

    基本的使用方式如下：

// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

3、单向传递参数到组件

      这里，我们说一下，通过Vue-CLI脚手架搭建的项目中如何将后台服务器参数传递到vue页面组件中。

     1）安装axios组件，切换到项目的根目录下面，执行如下的命令：

     

cnpm -i axios --save

       通过上述命令可以将axios安装到本项目的代码库中。

     2）在项目的App.vue中，引入axios。

import axios from "axios";

   
  3) 在项目中定义数据属性
  

data(){
    return{
       elite:"",
    }
}

  4) 进行调用
   在export default {}
   接口调用

created() {
    axios.get(接口URL).then(data => {
    this.elite = data;
    console.log(this.elite);
  }).catch(err => {
    console.log(err);
  })
}

5）将数据传递到组件

    

<QualityCourses qualityCourseArr:='elite'/>
//说明，QualityCourses 是组件名称 qualityCourseArr传递到组件的属性

6)  在组件中使用数据

   可以直接在组件中进行数据解析：

  

{{qualityCourseArr}}

4、测试验证

  启动服务：

  

npm run serve
//启动服务

  进行数据验证就行了。

5、总结

   在vue 组件中使用数据还是挺方便的，通过简单的几步就可以正常使用数据了。