1.组件_概念

 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
 组件化 ：封装的思想，把页面上 `可重用的部分` 封装为 `组件`，从而方便项目的 开发 和 维护
 
 什么时候封装组件?
 遇到重复标签, 可复用的时候

 组件好处?
 各自独立, 互不影响

2.组件_基础使用

 创建和使用组件步骤?
     创建.vue文件 – 标签 – 样式 – JS进去
     注册组件 (全局 / 局部)
     使用组件 (组件名用作标签)
     

3. 全局注册案例:

4.局部注册案例:

5.组件通信_父向子_props

目标：父组件 -> 子组件 传值
1. 父组件(App.vue)内, 要展示封装的子组件(MyProduct.vue)
  引入组件
  注册组件
  使用组件
  通过属性绑定传值到子组件
2. 子组件内, 定义props, 准备接收, 然后使用变量   

6.组件通信_父向子-配合循环循环创建组件

需求: 用v-for循环list组件,然后把它传给子组件

 <template>
 <div>
<my-product
  v-for="item in list"
  :key="item.id"
  :title="item.proname"
  :price="item.proprice"
  :info="item.info"
></my-product>
</div>
 </template>

<script>
import MyProduct from "./components/MyProduct.vue";
 export default {
 components: { MyProduct },
 data() {
return {
  list: [
    {
      id: 1,
      proname: "超级好吃的棒棒糖",
      proprice: 18.8,
      info: "开业大酬宾, 全场8折",
    },
    {
      id: 2,
      proname: "超级好吃的大鸡腿",
      proprice: 34.2,
      info: "好吃不腻, 快来买啊",
    },
    {
      id: 3,
      proname: "超级无敌的冰激凌",
      proprice: 14.2,
      info: "炎热的夏天, 来个冰激凌了",
    },
  ],
  };
},
};
</script>

<style>
</style>

7.组件通信_单向数据流

 目标：从父到子的数据流向, 叫单向数据流
 props里定义的变量不能修改, props里的变量本身是只读的
 

8. 组件通信_子向父

 语法:
       父组件中：< 子组件 @自定义事件名1="父methods函数1" @自定义事件名2="父methods函数2" />
       子组件中: this.$emit("自定义事件名1", 传值1) ---> 执行父methods里函数代码
       

砍一刀案例:

子向父传值案例:

9.组件_scoped作用的文件起作用

当style上添加scoped,组件内标签会自动添加 data-v-hash值 的属性

css选择器都被添加 [data-v-hash值] 的属性选择器

注:只会对添加scoped

10.组件示例

11.下载less样式包