Vue学习（slot、axios）-学习笔记

梦里梦外; 2022-10-04 14:56 106阅读 0赞

### 文章目录 ###

*   *  Vue学习（slot、axios）-学习笔记
     *   *  slot 插槽
         *  axios 交互

## Vue学习（slot、axios）-学习笔记 ##

### slot 插槽 ###

**父：**

<template>
    <div>
      testA组件：{
       {title}}
      <part2>
        
        <ul slot>
          <li>12313</li>
          <li>12313</li>
        </ul>
        
        <ul slot='s1'>
          <li>s1</li>
          <li>s1</li>
        </ul>
        <ul slot='s2'>
          <li v-for="(v,i) in arr" :key="i">{
       {v}}</li>
        </ul>
        
        
        
         
        <ul slot-scope='obj'>  
          <li v-for="(v,i) in obj.arr" :key="i">{
       {v}}</li>
        </ul>
      </part2>
    </div>
    </template>
    
    <script> import part2 from './part2.vue' export default { name:'', data(){ return{ title:'testA', arr:[1,2,4,5,2] } }, components:{ part2 } } </script>

**子：**

<template>
    <div>
      testB组件：
      
      <slot></slot>
      
      <slot name="s2"></slot>
      
      <slot :arr="arr"></slot>
      
    </div>
    </template>
    
    <script> export default { name:'', data(){ return{ title:'testB', arr:[1,2,2,2,2,2] } } } </script>

### axios 交互 ###

**axios相当于是对Promise的一种封装。**

//main.js
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import axios from 'axios'
    import './assets/font/iconfont.css'  //字体图标 
    import 'bootstrap/dist/css/bootstrap.css'
    
    Vue.config.productionTip = false
    Vue.prototype.$http= axios;
    
    axios.defaults.baseURL = 'http://127.0.0.1:3333' //axios自带属性defaults.baseURL
    
    new Vue({ 
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

<template>
    <div>
      <button> 发送</button>
      
      <ul>
        <li v-for="(v,i) in abc" :key="i" >{
       {v.name}}</li>
      </ul>
    </div>
    </template>
    
    <script> export default { name:'', data(){ return{ title:'testA', flag:false, arr:[], obj:{ id:1,name:2} } }, watch:{ //异步请求,数据不能实时渲染 法2 监听 arr:function(newValue,oldvalue){ this.arr = newValue; } }, mounted(){ this.send(); }, computed:{ //异步请求,数据不能实时渲染 法1 计算属性 abc:function(){ if(this.flag){ return this.arr } } }, methods:{ send(){ var self = this; // this.$http({ // method:'get', // url:'/get_table' // }).then(function(res){ // console.log(res) // }).catch(function(){ // }); ///get_table?id=1&name=2 this.$http.get('/get_table',{ params:this.obj} ).then(res=>{ console.log(res) this.arr = res.data.result; this.flag = true; }).catch(function(){ }) // this.$http.post('/get_table',this.obj // ).then(function(res){ // console.log(res) // }).catch(function(){ // }) // this.$http({ // method:'post', // url:'/get_table', // data:this.obj // }).then(function(res){ // console.log(res) // }).catch(function(){ // }); } } } </script>

突然想到echarts的引入，是否axios的引入也可以这样而不用原型继承呢，顺便插个图记一下，免得今后忘记了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221004/b31e88b3f5e742469a23fb70c1384034.png