三大件
el
data
methods
基本使用步骤
引入vue.js
实例化一个Vue对象 三大件
写视图 模板 div id =“app”
组件命名
<!-- 除了驼峰, 还可以使用-转换链接 -->
<!-- <todo-header></todo-header>
<!-- 单标签写法-->
<TodoHeader />
<!-- 双标签写法-->
<TodoHeader> </TodoHeader>
父子组件关系及应用
注意⚠️:默认子组件的根元素,会带上父组件的data-v-hash属性,所以可以直接控制
组件 作用:组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
组件化开发 :一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能
封装的思想,把页面上{ 可重用的部分 封装为 组件},从而方便项目的 开发 和 维护
1.每一个组件都是封闭的。每个组件可以有自己独立的 结构(template) 样式(style) 和 行为(script) (html, css和js)
2.组件之间可以相互引用使用
定义->导入->注册->使用
vue组件-用scoped实现组件的私有样式
style上加scoped, 组件内的样式只在当前vue组件生效;相反,样式就是全局的
<stype scoped>
h2 {} // 样式只会在当前组件内生效
</style>
vue组件-/deep/深度作用选择符
父组件中控制子组件元素或类名,覆盖样式=》需要在前边加上 /deep/
.box /deep/ h2 {
color: lawngreen;
}
vue通信
- 一个页面有多个组件构成
- 每个组件之间的数据是相互对立的
组件通信先暂时关注父传子(数据从父组件传递给子组件), 子传父(数据从子组件传递给父组件)
父传子 自定义属性 + props
- 创建组件components/MyProduct_13.0.vue - 准备标签
- 组件内再props定义变量, 用于接收外部传入的值
props属性名建议都小写,因为标签里的属性只能小写/把变量驼峰转成-连接 - App.vue中引入注册组件, 使用时, 传入具体数据给组件显示
子传父 自定义事件 + $emit
插槽 默认插槽 slot
具名插槽
单向数据流
- 父组件的数据发生了改变,子组件会自动跟着变
- 子组件不能直接修改父组件传递过来的props =》 props是只读的
说明:父组件传给子组件的是一个对象,子组件修改对象的属性,是不会报错的,对象是引用类型, 互相更新;但不能改变引用地址