一.vue组件

三大件

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通信

1. 一个页面有多个组件构成
2. 每个组件之间的数据是相互对立的
   

组件通信先暂时关注父传子（数据从父组件传递给子组件）, 子传父（数据从子组件传递给父组件）

父传子 自定义属性 + props

4. 创建组件components/MyProduct_13.0.vue - 准备标签
5. 组件内再props定义变量, 用于接收外部传入的值
   props属性名建议都小写,因为标签里的属性只能小写/把变量驼峰转成-连接
6. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示
   

子传父 自定义事件 + $emit
插槽 默认插槽 slot
具名插槽

单向数据流

1. 父组件的数据发生了改变，子组件会自动跟着变
2. 子组件不能直接修改父组件传递过来的props =》 props是只读的

说明：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新；但不能改变引用地址