记录这两天用到的前端知识

2020-01-03T16:43:01.751 | 浏览:112 | 文章类别: 前端

1. 子组件向父组件(孙 - - 爷) 传值

  • 子组件(孙组件)
export default {
    name: 'dataList',
    methods:{
        sendPageSize(){
            this.$emit('pageSize', this.pageSize, this.currentPage)
        }
    }
}
  • 父组件
<template>
    <dataList :dataList="waitData" @pageSize="getOnPageData">
    </dataList>
</template>

export default {
    name: 'main',
    methods:{
        getOnPageData(pageSize, currentPage){
            // 子组件传递到父组件成功
            console.log(pageSize, currentPage)
            // 继续向爷组件传递
            this.$emit('pageData', pageSize, currentPage)
        }
    }
}
  • 爷组件
<template>
    <main :dataList="waitData" @pageData="getPageData">
    </main>
</template>

export default {
    name: 'pages',
    methods:{
        getPageData(pageSize, currentPage){
            // 子组件数据传递到爷组件成功
            console.log(pageSize, currentPage)
            // TODO: 拿到传到的数据,开始coding吧~
        }
    }
}

需要注意的是: this.$emit('pagedata', pagesize, currentpage) pagedata是要父组件接收的(event),在父组件引用子组件的时候: @pagedata="getOnPageData" , getOnPageData为父组件定义的接收值和后续操作的函数。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。(父组件更新,子组件中的prop值也会更新,但子组件不能修改由父组件传递过来的值) 所以, 需要更改子组件的props的数据时,需要从父组件开始更改。

按需引入element-UI 组件和 css

  1. 下载elementui
npm i element-ui -S
  1. 在根目录的 plugins文件夹下新建 一个 element-ui.js 文件, 然后根据需要引入组件
import Vue from 'vue'
import {button, Table,TableColumn} from "element-ui";

Vue.use(button);
Vue.use(Table);
Vue.use(TableColumn);
  1. 把配置添加到全局中, 打开 nuxt.config.js文件, 在其中的 plugins 中加入刚才写的js文件
plugins: [
        { src: '@/plugins/element-ui', ssr: true }
],
  1. 按需加载 element-ui 组件所需的css文件

    打开 nuxt.config.js 文件,在其中的 build 中加入以下代码:

build: {
    // css文件外部引入,和elementui无关
    extractCSS: true,
    // 按需引入element-ui
    babel: {
        plugins: [
            [ "component", {"libraryName": "element-ui",  "styleLibraryName": "theme-chalk"}]
        ]
    },
    extend (config, ctx) {
    }
}
  1. 最后,在组件中就可以开心的使用elementui了。

覆盖element-ui原有的css,自定义自己的样式

在当前组件中 写局部(scope)css的时候,大部分情况下是覆盖不了element-ui的样式的,需要把自己的css写到全局中才可以覆盖掉。 自定义的css写到全局中肯定会造成污染。(项目小或整体就一次引入 不存在污染)
自认为最好的解决办法是:通过 head 引入 static 下的css进行覆盖;好处: 只对当前引入的组件生效,不会造成污染;还可以完全覆盖掉。

组件引入:

head(){
    return{
        link: [
            {rel : 'stylesheet', href: '/css/data2.css'}
        ]
    }
}

只需要把写的css文件,放到 /static/css/ 文件夹下就可以啦~

封装 axios 的 get请求

在任意位置新建一个 initGet.js文件(名称自定义),写入以下代码

import axios from "../plugins/axios";

////返回一个Promise(发送get请求)
export function fetchGet(url, token) {
  return new Promise((resolve, reject) => {
    axios.get(url, {headers: {'Authorization': token}})
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

调用:

引入:

import {fetchGet} from "../api/fetGet";

nuxt 异步获取数据调用

async asyncData(page) {
    let token = utils.getcookiesInServer(page.req).token;
    let [userInfo,] = await Promise.all([
        fetchGet('http://192.168.0.106:9004/getuserinfo', token)
    ]);
    return {
        userInfo: userInfo.data,
    }
},

同步数据调用

let token = utils.getcookiesInClient('token');
let data = fetchGet('/search' token);
data.then(function (response) {
    console.log(response)
})