vue路由和vuex

代理服务器proxy

执行顺序:

http://localhost:8080 ---> 代理服务器 ---> 服务器

返回是:

服务器 ---> 代理服务器 ---> http://localhost:8080

话不多说直接上代码

组件中发送请求

/根目录/views/list.vue

export default {
  name: "List",
  mounted() {},
  data() {
    return {
      list: [],
      page: 1,
      tag: true, //门：true 开着；false 关着
    };
  },
  async created() {
    //1.发送网路请求
    var result = await this.$http({
      url: "/xuexiao/api/getgoodlist",
      params: {
        cateid: 2,
        page: this.page,
        size: 5,
        type: 1,
      },
    });

    //2.列表渲染
    var list = result.data.list.goodData;
    this.list = list;

    //3.触底加载更多
  },
};

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  // devServer:{
  //   proxy:"http://api.aslegou.top"
  // },
  devServer: {
    proxy: {
      '^/api': {
        target: "http://api.aslegou.top",
        // ws: true,     //websockt   聊天
        // changeOrigin: true,      //对服务器撒谎，对服务器说：咱俩的基地址是一样的
      },
      '/uploads': {
        target: "http://api.aslegou.top"
      },
      '^/xuexiao': {
        target: "http://api.aslegou.top",
        pathRewrite: { '^/xuexiao': '' }
      }
    }
  }
})

组件注册与通信

父子传值props

父组件school.vue

<Student uname="张三" age="21" address="北京" @run="myRun"></Student>

子组件student.vue

<template lang="">
  <div class="container">
    <h2>Student组件</h2>
    <div>姓名：{{uname}}</div>
    <div>年龄：{{age+1}}</div>
    <div>地址：{{address}}</div>

    <button @click="myClick">点击</button>
  </div>
</template>
<script>
export default {
  name: "Student",
  // props: ["uname", "age", "address"],
  // props:{
  //   uname:String,
  //   age:Number,
  //   address:String
  // },
  props:{
    uname:{
      type:String,
      default:"张三丰",
      required:false,
      validator(e){
        if(e.length<4){
          return false
        }else{
          return true
        }
      }
    },
    age:Number,
    address:String
  },
  methods: {
    myClick() { 
      this.$emit("run",100)
    },
  },
};

子组件$emit

子组件Student.vue

<template lang="">
  <div class="container">
    <button @click="myClick">点击</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  methods: {
    myClick() { 
      this.$emit("run",100)
    },
  },
};

父组件school.vue

<template lang="">
  <div>
   <h1>School组件</h1> 
   <Student @run="myRun"></Student>
  </div>
</template>
<script>
import Student from "./Student.vue";
export default {
  name: "School",
  methods:{
    myRun(num){
      console.log(num)

    }
  },
  components: { Student },
};
</script>

父组件获取子组件属性

this.$refs

子组件获取父组件的属性和方法

//获取父组件方法

this.$parent.methods

//获取父组件属性

this.$parants.options