需要学习源码\nodejs

课程体系：

vue.js 8-9次课

组件化

组件通信

父组件-》子组件

    ·属性props
    //child
    props:{msg:String}
    //parent
    <Helloworld mesg="welcome to your vue.js"></Helloworld>
    ·引用refs
    //parent
    <Helloworld ref="hw"/>
    this.$refs.hw.xx='xxxx'(放在mounted,不能放在created,父组件先于子组件,否则得不到hw)
    ·子元素children
    //parent
    this.$children[0].xx='xxxx'(子元素不保证顺序，也不保证相应式)

子组件-》父组件：自定义事件

    //child
    this.$emit('add',good)
    //parent
    <Card @add="carAdd($event)"></Card>
    (类似观察者模式,谁派发谁监听)

兄弟组件：通过共同祖辈组件

    通过共同的祖辈组件搭桥,$parent或$root
    //brother1
    this.$parent.$on('foo',handle)
    //brother2
    this.$parent.$emit('foo')

祖先和后代之间

    由于嵌套层数过多,传递props不切实际，vue提供了provide/inject API完成该任务
    ·provide/inject:能够实现祖先给后代传值
    //ancestor
    provide(){
        return {foo:'foo'}
    }
    //descendant
    inject:['foo']
    *注意provide和inject主要为高阶插件/组件提供用例。并不推荐直接用于应用程序代码,我们更会在开源组件库中见到。建议注入进来的值不要改动
    但是，反过来想要后代给祖先传值这种方案就不行了

任意两个组件之间：事件总线或vuex

    ·事件总线:创建一个Bus类负责事件派发、监听和回调管理
    //Bus:事件派发、监听和回调管理
    Class Bus{
        constructor(){
            this.callbacks={}
        }
    }
    $on(name,fn){
        this.callbacks[name] = this.callbacks[name]||[]
        this.callbacks[name].push(fn)
    }
    $emit(name,fn){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(cb=>cb(args))
        }
    }
    //main.js
    Vue.prototype.$bus = new Bus();
    //child1
    this.$bus.$on('foo',handle);
    //child2
    this.$bus.$emit('foo');
    *实践中可以用Vue代替Bus，因为它已经实现了相应的功能

vuex:创建唯一的全局数据管理者store,通过它管理数据并通知组件状态变更

    范例：组件通信
        组件通信范例代码请参考components/comunicate

插槽

    插槽语法是Vue实现的内容分发API,用于复合组件开发。该技术在通用组件库开发中有大量应用。
    Vue2.6.0之后采用全新v-slot语法取代之前的slot\slot-scope

匿名插槽

    //comp1
    <div><slot></slot></div>
    //parent
    <comp>hello</comp>

具名插槽

    将内容分发到子组件指定位置
    //comp2
    <div>
        <slot></slot>
        <slot name="content"></slot>
    </div>
    //parent
    <comp2>
        <!--默认插槽用default做参数-->
        <template v-slot:default>具名插槽</template>
        <!--具名插槽用插槽名做参数-->
        <template v-slot:content></template>
    </comp2>

作用域插槽

    分发内容要用到子组件中的数据
    //comp3
    <div>
        <slot :foo="foo"></slot>
    </div>
    //parent
    <Comp3>
        <template v-slot:default="slotProps">(slotProps 形参)
            来自子组件数据：{{slotProps.foo}}
        </template>
    </Comp3>
    范例

组件化实战

    实现Form 管理数据模型-model、校验规则-rules、全局校验方法-validate
        \FormItem显示标签-label、执行校验-prop和显示校验结果
            \Input绑定数据模型-v-model、通知ForItem执行校验
    需要思考几个问题？
    1.input是自定义组件,它是怎么实现数据绑定的？
    2.FormItem怎么知道何时执行校验，校验的数据和规则怎么得到？
    3.Form怎么进行全局校验？它用什么办法把数据模型和校验规则传递给内部组件？
    
        最终效果：Element表单
        组件设计
        实现KInput
            ·任务1：实现自定义组件双向绑定功能
            （.sync也可实现双向绑定）
            (子组件 v-bind="$attrs",代表props之外的值)
            (子组件inheritAttrs：false避免顶层属性继承属性)
        使用KInput
        实现KFormItem
            ·任务1：给input预留插槽-slot
            ·任务2：能够展示label和校验信息
            ·任务3：能够进行校验
        使用KFormItem
        实现KForm
        使用KForm
        数据校验
    实现弹窗组件
        create
        通知组件
        使用create api

递归组件

    递归组件是可以在它们自己模板中调用自身的组件。
    实现Tree组件
        组件设计
        实现Item组件
        使用

扩展sync 用法

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
      template: `<div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props:['show'],
      methods: {
        closeDiv() {
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
      }
})
export default{
    data(){
        return{
            valueChild:true,
        }
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild
        }
    }
}
</script>

课程目标

    1.深入理解vue的组件机制 掌握vue组件化常用技术
    2.能够设计并实现多种类型的组件
    3.通过组件化实践加深对vue原理理解

资源

    1.vuejs2.6.x(https://cn.vuejs.org/)
    2.vue-cli3.x(https://cli.vuejs.org/)

组件化

    组件化是vue的核心思想，主要目的是为了代码重用。
    
    
2.vue全家桶&原理
3.手写vue源码
4.vue源码剖析
5.vue项目最佳实践 （开发手段技巧）
6.服务端渲染ssr
7.ts及vue应用