一、父子組件的訪問


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" }
            ]
          }
        ]
      }
    }
    

    • 

  • 

     
    

    •