脚手架2

利用事件总线的方式 实现兄弟传值

<template>
 
  <div>
   <h1 @click="send">我是childA组件信息</h1>
   <h1 @click="change">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name:'ChildA',
  props:['msg'],
  methods: {
    send(){
      this.$bus.$emit('childV','兄弟组件信息')
    },
    change(){
      this.$emit('update:msg','子改父')
    }
  },
}

<template>
  <div>
    <h1>兄弟组件B</h1>
    <h1>{{childaStr}}</h1>
  </div>
</template>

<script>
export default {
    name:'ChildB',
    data() {
        return {
            childaStr:''
        }
    },
    created() {
        this.$bus.$on('childV',(v)=>{
            this.childaStr = v
        })
    },
}
</script>

用ref 获取原生dom 点击dom 可以修改dom的内容 并且利用$nexttick获取最新的dom的内容

<script>
import axios from "axios";
import ChildA from "@/components/ChildA.vue";
import ChildB from "@/components/ChildB.vue";
export default {
  name: "App",
  data: function () {
    return {
      msg: "父组件信息",
      str: "123456",
    };
  },
  methods: {
    getText: function () {
      this.str = "abcdef";
      this.$nextTick(() => {
        console.log(this.$refs.haha.innerHTML);
      });
    },
  },
  components: {
    ChildA,
    ChildB,
  }, mounted: function () {
    console.log(this.$refs.childa);
    console.log(this.$children[0]);
  },

利用axios 实现get post的请求

created: function () {
    // axios.get('https://cnodejs.org/api/v1/topics')
    // .then(res=>{
    //   console.log(res)
    // })
    //   axios
    //     .post("http://timemeetyou.com:8889/api/private/v1/login", {
    //       username: "zhangsan",
    //       password: "123456",
    //     })
    //     .then((res) => {
    //       console.log(res);
    //     })
    //     .catch(function (err) {
    //     console.log(err);
    // });
    axios({
      method: "GET",
      url: "http://timemeetyou.com:8889/api/private/v1/users",
      params: {
        pagenum: 1,
        pagesize: 10,
      },
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1MTI1NDQyOTksImV4cCI6MTUxMjYzMDY5OX0.eGrsrvwHm-tPsO9r_pxHIQ5i5L1kX9RX444uwnRGaIM",
      }
    })
    .then(res=>{
      console.log(res)
    })
    .catch(err=>{
      console.log(err)
    })
    
  },