Vue Day 04

 

1、父子组件的访问

1.1父访问子

• $children

• $ref

 

1.2子访问父

• $parent

2、插槽slot

2.1具名插槽

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

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

   

2.2做用域插槽

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

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

3、前端模块化

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'

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