Vue组件化

一、组件化的使用过程

注册组件基本步骤

Vue组件化

全局组件和局部组件:

Vue组件化

全局组件,可以在多个Vue实例下面使用;
局部组件:
Vue组件化
总:
Vue组件化

父子组件:

Vue组件化
Vue组件化

注册组件的语法糖:

全局组件:
Vue组件化
局部组件:
Vue组件化
总:Vue组件化

组件模板抽离的写法:

Vue组件化
Vue组件化
将其中的html分离出来写,然后挂载到对应的组件上。


组件data必须是函数:

组件相互不影响。
Vue组件化
Vue组件化

父子组件通信

Vue组件化

父传子props

Vue组件化
Vue组件化
Vue组件化
Vue组件化
Vue组件化
props驼峰标识:
Vue组件化

子传父–自定义事件

Vue组件化
Vue组件化
Vue组件化
总结:
Vue组件化
Vue组件化

父子组件通信–结合双向绑定案例

Vue组件化
Vue组件化
Vue组件化
Vue组件化
图解:
Vue组件化

watch实现:

Vue组件化

父访问子–children-refs

Vue组件化
Vue组件化

子访问父–parent-root

Vue组件化
Vue组件化

slot插槽

slot-插槽的基本使用

Vue组件化
Vue组件化
Vue组件化
Vue组件化
很多button的时候,插槽可以使用默认值
Vue组件化
Vue组件化
Vue组件化

slot-具名(name)插槽的使用:

Vue组件化
Vue组件化


Vue组件化
Vue组件化
Vue组件化
Vue组件化

编译作用域

作用域插槽

Vue组件化
Vue组件化
Vue组件化
总:
Vue组件化
Vue组件化

相关文章: