Vue-3

父子通信+双向绑定

思路：用v-model 的原理：@input和：value。需要在子组件里设置data，新设置两个变量，不能直接在props里的变量改，不然会报错。再然后用@input方法下面在发射一个方法，让父组件监听，监听下面再把父组件的值修改。

父组件访问子组件

1.$children
事件需要在父组件加！
子组件下面的data和methods得和template在同一级
而且都要加上this

<div id="box">
    <zxx></zxx>
    <button @click='hhhh'>点击</button>
</div>

methods:{
    hhhh(){
        console.log(this.$children[0].zxx);
    }
}

缺点：如果重新插入别的子组件的话，索引号就可能会改变，因此不常用

2.$refs
常用
需要给组件增加一个属性

<zxx ref='aaa'></zxx>

而且要这样调用

methods:{
    hhhh(){
        console.log(this.$refs.aaa);
    }
}

3.自访问父（理解），基本不用，不然耦合性太差了，而且vue实例一般不加别的属性
注意，这个事件只能放在子模板中

$parent,$root

Slot

就是为了更加灵活地运用组件
1.在模板里面写上slot标签，name可以在html的这个模板中加你想要的东西。
而且一个标签，可以加多个内容。

<div id='box'>
        <zxx>
            <button>123</button>
        </zxx>
    </div>
    <template id='pp'>
        <div>
            <span>123</span>
            <h4>1232</h4>
            <slot></slot>
        </div>
    </template>

2.slot标签里面可以放默认标签。
如果html的模板有内容，name默认标签消失，没有内容，默认标签生效。

<span>123</span>
<h4>1232</h4>
<slot><button>123</button></slot>

3.也可以具名solt标签

就是说，你可以选择哪一个slot进行替换。
slot标签加一个name熟悉，html的标签下面的zxx模板，每一个template都对应一个具名模板。

    <div id='box'>
        <zxx>
            <template v-slot:center>
                    中间变了
            </template>
            <template v-slot:right>
                    右边辩护了
            </template>
        </zxx>
    </div>
    <template id='pp'>
        <div>
            <span>123</span>
            <h4>1232</h4>
            <slot name='center'><span>中间</span></slot>
            <slot name='right'><span>右边</span></slot>
        </div>

编译作用域

下面的isshow只会找父组件的isshow不会找子组件的，同理，子组件的isshow不会找父组件的。

这里是在子组件的模板里面的，所以只会找子组件的isshow

如果你想在html的模板使用子组件的数据的话
再这个插槽里，动态绑定一个属性，其实：qq='qq’都是子组件的data的对象名。

<template id='pp'>
    <div>
        <span>123</span>
        <h4>1232</h4>
        //第一个qq就是qq，不能随便起名字
        <slot :qq='qq'>{{qq.first}}</slot>
    </div>
</template>

再这个template里面加上v-slot：default，其中zxx可以随便取

<zxx>
//zxx也可以顺便去，这样的话zxx其实就是引用了上面的第一个qq，然后第一个qq其实等于第二个qq。
    <template v-slot:default='zxx'>
        {{zxx.qq.last}}
    </template>
</zxx>

模块化开发

会有许多js文件，会导致变量的污染。
解决：1.用闭包的思维实现。每个js文件都被一个立即执行函数给封装，这样的话
js下面的所有变量都只会在这个匿名函数里面，如果要用的话，可以用闭包的思路：返回一个变量，变量下面挂着几个要用的东西，就可以了

2.模块化思想，commonjs，在node里面用export和require实现。

ES的模块语法

ES给我们提供了export，import指令来避免不同js文件的变量处理问题。
首先我们需要在html代码引入的js文件中设置类型为module，这样子每个js都相当于一个单独的包，里面的变量不会和外面的有冲突。
而且导入的话一定要是对象。

1.多个变量导出导入

let a=1;

let bb=function(){
    console.log(123);
}

export{
    a,bb
}

//导入的一定要是对象
import{a,bb} from './aaa.js'

console.log(a);
console.log(bb);

2.单个导出，导入同上

export let ab=100;

3.也可以导出函数或者类

4.可以导出default，但是只能在js中用一次（因为如果在这里插入代码片多次default就无法识别到底是导出哪一个）

let a=1;

export default a;

好处就是：我接受的时候可以自己命名（bbbb就可以自己命名了）

import bbbb from './aaa.js'
console.log(bbbb);

5.所有的变量都导入
可以把之前的输出的变量都获得。

import * as aaa from './aaa.js'