推荐用以下方式引入组件
is引入组件,实现动态组件
image.png
动态组件,修改data里面comtorender的值,可以引入不同的组件
image.png
父子组件之间的通信
父向子组件传递一个属性number
image.png
子组件通过props选项声明number
属性大小写不敏感,所以不能用驼峰的方法,用中线
image.png
props:数组,字符串
指定传值类型是number或者string
image.png
父组件传递的是变量
image.png
image.png
子组件向父组件传递信息时,通过触发事件,事件名不支持驼峰写法,用中线
插槽功能: slot标签,父向子组件传递模板
父组件在子组件内增加了一个p标签
子组件
子组件通过slot接收
image.png
更复杂的情况
image.png
image.png
keep-alive内置标签,缓存组件,提高加载速度
image.png
实现动态组件的两种方法:is或者v-bind
总结
image.png
vue-高级功能
image.png
过渡-动画效果(css过渡或者js过渡)
通过4个类名实现css过渡
image.png
transition标签
定义name属性的名称:比如fade
image.png
再为不同的阶段定义不同的样式
image.png
transform控制位置变化
三种模式v-show,v-if,is动态组件
多元素过渡,transition标签默认in-out模式,先进新的元素,后出旧的元素,通过mode可以控制动画展示过程
image.png
注意:多元素,如果是相同标签,那么不展示动画效果,必须通过key属性来区分
image.png











网友评论