Vue学习（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>
    <!-- 作用域插槽 -->
    <!-- 相当于父组件提供了一套模板，数据是子组件的 -->
    <!-- obj ==== { "title": "testB" } -->
     <!-- <div slot-scope='obj'>  
      {{obj.title}}
    </div> -->
    <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的引入也可以这样而不用原型继承呢，顺便插个图记一下，免得今后忘记了