vue3

MVVM:

M
model 数据

V
view 页面

VM
viewModel Vue实例
DOM监听(DOM Listeners)
数据绑定(Date Bindings)

什么是组件:

组件的出现就是为了拆分Vue实例的代码量 能够让我们以不同的组件来划分不同的功能模块 需要什么功能就去调用对应的模块即可 局部功能界面

组件化和模块化的区别:

模块化:
是从代码的逻辑角度去划分的 方便代码分层开发 保证每个功能模块的职能单一

组件化:
是从UI界面的角度进行划分的 前端的组件化方便UI组件的重用

组件参数

props:[‘xxx’]

父向子传参:

通过 props 向子组件传递数据
可以在组件实例中通过 this.xxx 拿到传递过来的值
高级写法(props验证)

props可以传递任何数据类型 包括函数

data(){ return{ } }
组件中的数据data是一个函数 将数据写在返回出去的对象中即可

父子组件传参:

父传子

子组件中定义 props 属性 props:[‘num’,‘max’,‘min’]

父组件中使用子组件时 <comSon num='xxx' max='xx' :min='x'></comSon>

子传父

子组件中 特定的时候 触发 this.$emit('事件名A','参数')

父组件中 <com @事件名A="自己methods中的方法"></com>

Vue实例中的this

this就是当前实例化出来的Vue对象(Vue实例)

Vue构造函数内部解析时 会把data、methods等中的值直接设置给这个实例化出来的Vue实例对象

最终直接通过这个Vue实例对象即可访问data中的数据以及methods中的方法等