vue-03(组件化开发)

组件化开发思想

vue-03(组件化开发)_第1张图片
vue-03(组件化开发)_第2张图片
vue-03(组件化开发)_第3张图片

组件注册

vue-03(组件化开发)_第4张图片
vue-03(组件化开发)_第5张图片
vue-03(组件化开发)_第6张图片
组件是可以重用的,且每个组件的数据是独立的
另一个用法
vue-03(组件化开发)_第7张图片

注意事项

在这里插入图片描述
vue-03(组件化开发)_第8张图片
保证每个组件有自己的环境
在这里插入图片描述
在这里插入图片描述
可以用一个大的div包起来
在这里插入图片描述
在这里插入图片描述
vue-03(组件化开发)_第9张图片

vue-03(组件化开发)_第10张图片
vue-03(组件化开发)_第11张图片
驼峰命名放到跟元素,会报错
在这里插入图片描述
可以换成短横线
在这里插入图片描述
(驼峰式使用时只能在字符串模板中使用组件,在普通标签中必须使用短横线方式)

局部组件注册

vue-03(组件化开发)_第12张图片
vue-03(组件化开发)_第13张图片

vue-03(组件化开发)_第14张图片
再定义一个组件
在这里插入图片描述
vue-03(组件化开发)_第15张图片
在这里插入图片描述
局部注册的组件只能在注册他的父组件里面使用

调试工具

组件间数据交互

父组件->子组件

vue-03(组件化开发)_第16张图片
vue-03(组件化开发)_第17张图片
绑定
vue-03(组件化开发)_第18张图片
结合使用:
vue-03(组件化开发)_第19张图片
vue-03(组件化开发)_第20张图片
因为第一个组件没有传递content
vue-03(组件化开发)_第21张图片
vue-03(组件化开发)_第22张图片
字符串类型
vue-03(组件化开发)_第23张图片
数值:
vue-03(组件化开发)_第24张图片
布尔值:
vue-03(组件化开发)_第25张图片
数组:
vue-03(组件化开发)_第26张图片
对象:
vue-03(组件化开发)_第27张图片

子组件像父组件传值

vue-03(组件化开发)_第28张图片

vue-03(组件化开发)_第29张图片
props传递数据是单向数据流,父到子可以,子到父不行

vue-03(组件化开发)_第30张图片
vue-03(组件化开发)_第31张图片
通过第二个参数
vue-03(组件化开发)_第32张图片
vue-03(组件化开发)_第33张图片

非父子组件

兄弟组件
vue-03(组件化开发)_第34张图片
new一个事件中心
监听事件
vue-03(组件化开发)_第35张图片
vue-03(组件化开发)_第36张图片
vue-03(组件化开发)_第37张图片
vue-03(组件化开发)_第38张图片
销毁
vue-03(组件化开发)_第39张图片
vue-03(组件化开发)_第40张图片

组件插槽

vue-03(组件化开发)_第41张图片
vue-03(组件化开发)_第42张图片
vue-03(组件化开发)_第43张图片
如果填充在slot里:
vue-03(组件化开发)_第44张图片
在这里插入图片描述

具名插槽

vue-03(组件化开发)_第45张图片
vue-03(组件化开发)_第46张图片
另一个方法:
vue-03(组件化开发)_第47张图片
vue-03(组件化开发)_第48张图片
template是vue的API,临时性的包裹信息,不会渲染到页面

作用域插槽

vue-03(组件化开发)_第49张图片
vue-03(组件化开发)_第50张图片
子组件封装好就很少动了,最好从父组件决定子组件哪个高亮,用作用域插槽
用slot包裹起来
vue-03(组件化开发)_第51张图片
vue-03(组件化开发)_第52张图片
vue-03(组件化开发)_第53张图片
slotProps是自定义的

案例

vue-03(组件化开发)_第54张图片
vue-03(组件化开发)_第55张图片
动态标题
vue-03(组件化开发)_第56张图片
vue-03(组件化开发)_第57张图片
计算总价

vue-03(组件化开发)_第58张图片
传入组件
vue-03(组件化开发)_第59张图片
通过遍历渲染页面图片和名字
vue-03(组件化开发)_第60张图片
vue-03(组件化开发)_第61张图片
把id传递给父组件
vue-03(组件化开发)_第62张图片
vue-03(组件化开发)_第63张图片
父组件监听:
vue-03(组件化开发)_第64张图片
vue-03(组件化开发)_第65张图片
vue-03(组件化开发)_第66张图片
vue-03(组件化开发)_第67张图片

你可能感兴趣的:(vue)