父子组件具体访问 + 插槽slot + 模块化开发webpack -- 大二上第十五周

父子组件的相互通信实例

子组件不能改变父组件内部的值

如果想要改变从父组件传入子组件的数值，可以通过data重新定义变量或者使用计算属性

<div id="app">
  <cpn :number1="num1" :number2="num2"
  @num1change="num1change" 
  @num2change="num2change"
  ></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{number1}}</h2>
    <h2>{{denumber1}}</h2>
    <!-- <input type="text" v-model="denumber1"> -->
    <!-- <input type="text" :value="denumber1" @input="denumber1=$event.target.value"> -->
    <input type="text" :value="denumber1" @input="num1Input">
    <h2>{{number2}}</h2>
    <h2>{{denumber2}}</h2>
    <!-- <input type="text" v-model="denumber2"> -->
    <input type="text" :value="denumber2" @input="num2Input">
  </div>
</template>
<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      num1: 1,
      num2: 0
    },
    methods: {
      num1change(num){
        this.num1 = num;
        // this.num2 = num * 100;
      },
      num2change(num){
        this.num2 = num;
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number 
        },
        data(){
          return{
            denumber1: this.number1,
            denumber2: this.number2
          }
        },
        methods: {
          num1Input(event){
            this.denumber1 = parseFloat(event.target.value);
            this.$emit("num1change", this.denumber1);
            this.denumber2 = this.denumber1 * 100;
            this.$emit("num2change", this.denumber2);
          },
          num2Input(event){
            this.denumber2 = parseFloat(event.target.value);
            this.$emit("num2change", this.denumber2);
            this.denumber1 = this.denumber2 / 100;
            this.$emit("num1change", this.denumber1);
          }
        }
      }
    }
  })
</script>

一个父子组件直接的通信传递案例

watch用于监听属性的改变

父子组件的访问方式

1. 父访问子
   $children 或者 $refs
   $children会返回一个数组，里面包含着所有的子组件，但实际开发中一般不使用$children，需要访问就直接在父组件中访问this.$children
   $refs就是最常用的方法，给组件加上ref属性，ref的属性值作为refs的key来访问相应的子组件，这就是一般开发中最常用的方法来访问子组件中的内容。具体使用如下：

console.log(this.$refs.aaa);

2. 子访问父
   $parent
   $parent用的比$children更少,$root访问根组件

console.log(this.$parent);//访问父组件
console.log(this.$root);//访问根组件(也就是vue实例对象)

插槽slot

组件的插槽是为了让我们封装的组件更据有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

<slot></slot>
<!-- 作用是预留空间 -->
<slot><button>按钮</button></slot>
<!-- 插槽的默认值 -->

如果有多个元素但是只有一个插槽的话，就会将多个元素一次性全部替换
如果是多个插槽的话，就会吧cpn里面的所有标签全部多次替换

具名插槽

就是给slot加上name属性，给cpn里面的元素加上slot属性

<cpn><span slot="center">标题</span></cpn>
<slot name="center"><span>中间</span></slot>

作用域插槽

父组件替换插槽的标签，但是内容是由子组件来提供

如果要呈现的内容存在子组件里面，可以使用作用域插槽来实现

pLanguage:['javascript','python','swift','go','c++']// 子组件的内容
<div slot-scope="slot">
  <span>{{slot.data.join(" - ")}}</span>
</div> // cpn里面这样写
<slot :data="pLanguage"></slot>// template标签里面这样写

简单来说就是用slot-scope将子组件内容传到外面使用，这就作用域插槽

父组件模板的所有东西都会在父级作用域内编译，子组件模板中的所有东西都会在子级作用域内编译

模块化开发

script的type要是module

1. export 导出
   可以在文件末直接导出一个对象
   也可以在想导出的变量前加上export
   也可以导出函数或者类
   export default 只能导出一个，这个是导入别人默认导出的内容，可以自己命名
   上述都是es6规范

module.exports = {
  add, mul
}//commonjs的规范

2. import{}from"文件名" 导入
   还可以import * as name from “文件名” 这样导入是将全部都导出在name对象里面
   上述是es6规范

const {add, mul} = require("./aaa");//commonjs规范

webpack

从本质上来讲，webpack是现代JavaScript应用的静态模块打包工具

grunt/gulp和webpack的不同：grunt/gulp更加强调的是前端流程自动化，模块化不是他的核心
webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能是附带的

一般情况下，src文件夹用于放置源码，dist文件夹用来放置打包好的内容，然后讲dist文件夹发送给服务器然后发布

webpack main.js …/dist/bundle.js
这行终端中的命令的目的是将main.js中的文件，通过webpack转化为dist目录下的bundle.js文件
在index.html文件里面将bundle.js文件引入就相当于是将所有的js文件引入

webpack.config.js 和 package.json

用于简化上面的终端命令

下面就是一个简单的webpack.config.js文件里面的内容

const path = require("path");

module.exports = {
  entry: "./scr/main.js",//入口文件
  output: {//出口
    path: path.resolve(__dirname, "dist"),//需要动态获取绝对路径
    filename: 'bundle.js'
  }
}

引入path模块需要在终端中使用npm init命令，这样会让生成一个package.json文件，这个JSON文件中script对象里面是脚本命令，可以在script对象里面加上一个名称代理

"build": "webpack"

这样在终端中执行命令的时候可以更加的简便，如果需要执行webpack命令，则只需要执行npm run build命令
这个时候，build命令会先找本地的webpack，如果本地没有，才会找全局的

npm install webpack@3.6.0 --save-dev命令是在本地下载3.6.0版本的webpack包，–save-dev命令表示安装开发时依赖的webpack包
安装结束之后，package.json文件里面会出现下面这个，表示webpack是开发时依赖

"devDependencies": {
  "webpack": "^3.6.0"
}

css文件的配置 – loader

loader的使用需要通过npm安装，然后在webpack.config.js中的module关键字下面进行配置

npm install --save-dev css-loader安装命令，具体安装命令以及配置需求都是直接在官网里面找的

css-loader 只负责将css文件进行加载
style-loader 负责将样式添加到DOM中

use: ["style-loader", "css-loader"]

加载多个loader的时候，是从右向左加载的，所以顺序不能反

接下来要复习考试了，大概率接下来几周不会有前端的学习笔记了。