Vue组件基础

最新推荐文章于 2024-05-11 17:03:33 发布

键舞者

最新推荐文章于 2024-05-11 17:03:33 发布

阅读量263

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_52655865/article/details/129663859

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1，单文件组件

Vue单文件组件（又名.vue 简称SFC）是一种特殊的文件格式，他允许Vue组件的模板，逻辑，样式封装在单个文件中。

就是说一个vue组件，可以将html，js，css封装在一个单独的文件中。

<template>   //html
    <div class="hello">
    
    </div>
</template>
  
<script>  //js
  export default {
    name: 'v-if',
    
  }
</script>
<style>  //css

</style>

加载组件

在APP.vue根组件中引入myComponent组件

<template>
  <myComponent/> <!--3，显示组件-->
</template>
<script>
import myComponent from './components/myComponent.vue';//1，引入组件
export default {
  name: 'App',
  components: {
    myComponent //2，挂载组件
  }
}
</script>

style中的scoped属性：如果在APP.vue的style中定义了样式，如果不添加scoped属性，则会在APP.vue加载的全部组件都显示这个样式，如果只在APP.vue中显示该样式，则需要添加scoped属性。

组件的组织

2，Props组件交互（父类向子类传递）

组件之间需要存在这数据的交互，Prop能决定组件和组件之间数据的传递。

在APP.vue中定义一个value

data(){
    return{
      title:"Props组件之间数据的交互"
    }
  }

在APP.vue的template中进行数据绑定

  <myComponent :title="title"/> <!--3，显示组件-->

在myComponent组件中使用props接受传递的参数

props:{
      title:{
        type:String,
        defaulet:""
      }
    }

在mucomponent组件中显示

    <h1>Props：{{title}}</h1>

可以看到存在雨APP.vue中的数据，通过props数据传递，显示在了mycomponent组件之上。

注意props的固定格式

props:{
    key:{
        type:类型,
        default:"" //默认值
    }
}

props可以传递众多数据类型，没有数据类型的限制。

props在传递数组和对象时，采用工厂模式进行返回，也就是说必须使用函数进行返回。

APP.vue进行数据定义和数据传递

  <myComponent :title="title" :names="names"/> <!--3，显示组件-->


data(){
    return{
      title:"Props组件之间数据的交互",
      names:[
        {
          id:1001,
          name:"胡三"
        },
        {
          id:1002,
          name:"胡四"
        },
        {
          id:1003,
          name:"胡五"
        },
      ]
    }
  }

myComponent组件使用props进行数据接收

 <ul>
      <li v-for="item in names" :key="item.id">{{ item.id }}   and   {{ item.name }}</li>
</ul>

    props:{
      title:{
        type:String,
        default:""
      },
      names:{
        type:Array,
        default:function(){
          return []
        }
      }
    }

3，$emit自定义事件传递数据（子类向父类传递参数）

子类mycomponent.vue

    <!-- $emit子类向父类传递数据 -->
    <button @click="sendMsgOnClick()">点击向父类发送数据</button>

    data(){
      return{
        msg:"我是子组件，我被点击后，将这条信息传递给了父组件"
      }
    },
    methods:{
      sendMsgOnClick(){
        // 使用$emit 第一个参数，定义的是父类中出发事件的事件名，第二个参数则是需要传递的数据
        this.$emit("onEvent",this.msg);
      }
    }

父类APP.vue接受子类传递的数据

  <!-- 使用自定义组件传递数据，这里的@onEvent事件，必须和子类中$emit中的第一个参数同名，进行绑定 -->
  <myComponent @onEvent="receiveMsg"/> <!--3，显示组件-->
  <p>使用$emit向父类传递数据：{{ msg }}</p>

  data(){
    return{
      msg:"",
    }
  },
  methods:{
    receiveMsg(data){
      this.msg = data;
    }
  }

4，组件的生命周期

vue的生命周期分为8个阶段

创建时：beforeCreate ， created
渲染时：beforeMount ， mounted
更新时：beforeUpdate ， updated
卸载时：beforeUnmount ， unmounted
vue的8个生命周期是按照vue页面的加载顺序执行，
在页面初始化阶段，执行create的这两个函数，
页面加载完成，此时mount阶段执行完成，mount阶段，可以将网络请求等一系列操作放在此处，用于对数据进行渲染
当页面数据发生变化时，就会执行update函数
最后会执行unmount阶段，在beforeUnmount阶段，可以将一些资源的回收操作，放在此处进行

5，vue引入第三方

vue第三引入在v2的官网上

vue2官网

可以找到很多关于v2的第三方，在v3官网上没有引入优秀的第三方链接，在v2官网上寻找资源时，需要根据vue的版本，有的只支持v2，不支持v3

示例引入轮播图

1，安装swiper

npm install --save swiper@8.1.6  // 引入swiper8.1.6版本的轮播图第三方，可以在packjson中查看

<template>
  <div class="hello">
    <!-- 3，创建轮播图 -->
    <!-- 5，:modules="modules" :pagination="{clickable: true}"，绑定 -->
    <swiper :modules="modules" :pagination="{clickable: true}">
      <SwiperSlide>
        <img src="../assets/logo.png" alt="">
      </SwiperSlide>
      <SwiperSlide>
        <img src="../assets/logo.png" alt="">
      </SwiperSlide>
      <SwiperSlide>
        <img src="../assets/logo.png" alt="">
      </SwiperSlide>
    </swiper>
  </div>
</template>

<script>
//1，引入swiper和其样式
import {Swiper,SwiperSlide} from 'swiper/vue'
import 'swiper/css'
import {Pagination} from 'swiper'
import 'swiper/css/pagination'

export default {
  name: 'HelloWorld',
  //4，Pagination，绑定Pagination的返回结果
  data(){
    return{
      modules: [Pagination]
    }
  },
  //2,注入组件
  components:{
    Swiper,
    SwiperSlide
  }
}
</script>

<style scoped>

</style>

6，Axios网路请求

Axios基于promise的网络请求

1，安装axios

npm install --save axios

2，引入

组件引入：

import axios from "axios"

npm install --save querystring

发起axios请求：

axios的快捷方式

3，全局引入

在main.js中引入

import axios from "axios"

const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.mount("#app")

//在需要发送axios请求的组件中，调用
this.$axios

7,Axios网络请求的封装

在src下创建一个util目录，在创建一个request.js文件，用来封装一些请求配置信息

//封装axios请求
//1，引入axios和querystring依赖
import axios from "axios";
import { config } from "process";
import querystring from "querystring";

//2，实例化一个axios对象，并进行一些配置
const instance = axios.create({
    //设置网络超时时间
    timeout:5000
})


const errorHandle = (status,info) =>{
    switch(status){
    case 408:
    console.log("语义有误");break;
    case 401:
    console.log("服务器认证失败");break;
    case 403:
    console.log("服务器拒绝访问");break;
    case 404:
    console.log("地址错误");break;
    case 500:
    console.log("服务器遇到意外");break;
    case 502:
    console.log("服务器无响应");break;
    default:
    console.log(info);break;
    }
}
    

//拦截器设计

//发送请求之前
instance.interceptors.request.use(
    config =>{
        if(config.methods === "post"){
            config.data = querystring.stringify(config.data);
        }
        return config;
    },

    error =>{
        Promise.reject(error)
    }
)


//获取数据之前
instance.interceptors.request.use(
    respond =>{
        if(config.methods === "post"){
            config.data = querystring.stringify(config.data);
        }
        return config;
    },

    error =>{
        const{respond} = error;
        //错误进行数据处理
        errorHandle(respond.status,respond.info);
    }
)

export default instance;

在src创建一个api文件夹，在创建一个path.js 和一个 index.js

path.js

const base = {
    baseUrl:"https://blog.csdn.net/",
    authorUrl:"qq_52655865"
}

export default base;

index.js

import axios from "axios";
import path from "./path";

const api = {
    getAuthorUrl(){
        return axios.get(path.baseUrl+path.authorUrl)
    }
}

export default api;

此时，我们在组件中进行访问"https://blog.csdn.net/qq_52655865"该链接

import api from "../api/index"

  method(){
    api.getAuthorUrl().then(res =>{console.log(res.data);})
  }

8,网络请求跨域解决方案

JS采取的是同源策略

同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略.

也就是说，当协议、域名、端口任意一个不相同时，都会产生跨域问题，所以又应该如何解决跨域问题呢

前台解决跨域

在vue.config.js文件中，复制到文件中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      "/api":{
        target: 'http:域名:端口号',//在这里添加需要跨域网址的协议，域名，端口号
        changeorigin: true
        }
    }
  }
})