4.vue3 组件组件组件的定义和使用组件的传值父传子 props验证子传父兄弟组件传值生命周期

组件

组件的定义和使用

组件的传值

父传子

props验证

 props:{

        n:{

          type:Number,  //类型

          // required:true  //必须传递这个参数

          //default:100  //是默认值

          validator(value){  //自定义验证规则

            return value>=0 && value<=750

          }

        }

      },

子传父

兄弟组件传值

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
 let emitter =mitt();
  emitter.emit("msg","abc")

   created(){  //这个函数会自动调用 实例完成所有状态相关的处理之后会自动调用  
                emitter.on("msg",(e)=>{  //接受兄弟传过来的值
                    console.log(e)
                    this.str=e;
                })
  },

生命周期的钩子函数

在组件的生命周期的过程中自动的调用的函数，叫做生命周期的钩子函数

创建阶段

beforeCreate 组件实例初始化之后，自动调用

created 组件实例完成所有状态相关的处理之后会自动调用可以拿到数据

挂载阶段

boforeMount 组件挂载前自动调用

mounted 组件挂载后自动调用不但可以拿到数据，还可以拿到真实的dom节点

可以用ref标识节点

<input type="text"  ref="txt">
this.$refs.ref的标识  就可以拿到节点了

ref可以标识组件，父组件可以读写子组件里的数据，也可以访问子组件里的方法

父子组件创建和挂载阶段钩子函数的执行次序

app beforeCreate
app created
app beforeMount
child beforeCreate
child created
child beforeMount
child mounted
app mounted

更新阶段

beforeUpdate 组件因为一个响应式状态改变后，更新 dom树之前自动调用

updated 组件因为一个响应式状态改变后，更新 dom树之后自动调用

销毁阶段

beforeUnmount 组件卸载前调用清理资源，防止内存泄露

unmounted 组件卸载后调用

watch

 watch:{  //监听组件里特定数据的变化
                k(n,o){
                    console.log(n,o)
                },
                obj:{
                    handler(n){  //对象的监控要用handler处理
                        console.log(n)
                    },
                    deep:true,  //对象必须是深度监控
                    immediate:true //立即监控
                }
            },

复习和补充

MVVM M model 模型层数据

V view 视图渲染数据展示数据

vm viewModel 视图模型视图和模型沟通的桥梁，模型数据变化了，视图也会变化

vfor 中的key值得作用为了找到修改数据的那个对应的虚拟dom节点的条件之一，能提高比对效率

$nextTick 延迟执行回调函数，知道下一次循环dom更新后执行