一、父子组件的访问


1.1父访问子


    

  • 

    $children
    

    • 

  • 

    $ref
    

    • 



 


1.2子访问父


    

  • 

    $parent
    

    • 



二、插槽slot


2.1具名插槽


    

  • 

    <slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽 
    

    • 

  • 

    在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
    

     
    

    • 



2.2作用域插槽


    

  • 

    <slot v-bind:user="user">
    

    • 

  • 

    

    

    <template v-slot:default="slotProps">
    

    

    

    • 



三、前端模块化


3.1CommonJS


    

  • 

    导出 module.exports=对象
    

    • 

  • 

    导入 let obj=require('xxx.js')
    

    • 



3.2ES6的export


    

  • 

    导出 export {变量1,变量2...}或者export let name='abc'
    

    • 

  • 

    导入
    

      

    • 

      首先，我们需要在HTML代码中把js文件设置为type=module，然后再import obj from 'xxx.js' 或者 import * as obj from 'xxx.js'
      

      • 

    

    • 



四、webpack


4.1步骤


    

  • 

    全局安装webpack ：npm install webpack -g
    

    • 

  • 

    局部安装webpack：npm install webpack --save-dev
    

    • 

  • 

    创建src（开发的源代码）和dist（发送到服务器部署的）文件夹
    

    • 

  • 

    生成package.json：npm init
    

    • 

  • 

    使用webpack打包：webpack src/main.js dist/bundle.js
    

    • 



4.2配置webpack的入口和出口


    

  • 

    在项目根目录下创建一个webpack.config.js
    

    • 

  • 

    const path = require('path')//从node环境下取得当前文件的路径对象
    ​
    module.exports = {
      entry: './src/main.js',//入口
      output: {//出口
        path: path.resolve(__dirname, 'dist'),//绝对路径
        filename: 'bundle.js'
      },
    }
    

    • 

  • 

    这样可以用webpack命令直接使用webpack打包而不用写后面的参数
    

    • 



4.3package.json中定义启动


    

  • 

    我们可以在package.json的scripts中定义自己的执行脚本
    

    • 

  • 

    {
      "name": "meetwebpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^3.6.0"
      }
    }
    

    • 

  • 

    然后使用命令npm run build,它相当于使用了命令webpack
    

    • 



4.4css-loader


    

  • 

    我们在js文件中使用import style from 'xxx.css'导入css文件
    

    • 

  • 

    使用命令npm install --save-dev css-loader和npm install style-loader --save-dev安装style-loader 和 css-loader
    

    • 

  • 

    配置 webpack.config.js
    

    {
        ...
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              { loader: "style-loader" },
              { loader: "css-loader" }
            ]
          }
        ]
      }
    }
    

    • 

  • 

     
    

    •