文章目錄

• • 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><!-- 作用域插槽 --><!-- 相當于父組件提供了一套模板，數據是子組件的 --><!-- 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.baseURLnew 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=2this.$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的引入也可以這樣而不用原型繼承呢，順便插個圖記一下，免得今后忘記了

總結

以上是生活随笔為你收集整理的Vue学习（slot、axios）-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。