let obj = { 
             fn: function(){ 
                 // this指向此函数的调用者     },     fn () { 
                 // this指向当前函数的调用者 (如果都在vue里, this指向的都是vue实例对象)     },     fn: () => { 
                 // this指向外层函数作用域this的值     } } obj.fn();  axios().then(res => { 
             // 这里的this值是多少？ }) 

let a = 10; let b = a;  b = 20; // 基础类型, 赋值简单  let a = { 
        name: "哈哈"}; let b = a; // a变量值为引用类型， a将对象存储在堆中， 所以b和a指向同一对象 (引用类型=是内存地址的赋值) b.name = "刘总"; 

1.能够理解vue组件概念和功能。 2.能掌握封装组件的能力。 3.可以使用组件之间的通信。 4.能够完成todo案例。

以前做过折叠面板：

需求: 现在我想收起多个部分。 方案1: 复制代码：

• 代码重复 冗余
• 不利于维护

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码。

组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护。

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

目标: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件。

口诀: 哪部分标签复用, 就把哪部分封装到组件内。

(重要): 组件内template只能有一个根标签

(重要): 组件内data必须是一个函数, 独立作用域

步骤: 1.创建组件 components/Pannel.vue

• 封装标签+样式+js - 组件都是独立的, 为了复用

<template>
  <div>
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        { 
        { 
         isShow ? "收起" : "展开" }}
      </span>
    </div>
    <div class="container" v-show="isShow">
      <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
export default { 
        
  data() { 
        
    return { 
        
      isShow: false,
    };
  },
};
</script>

<style scoped>
.title { 
        
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}
.title h4 { 
        
  line-height: 2;
  margin: 0;
}
.container { 
        
  border: 1px solid #ccc;
  padding: 0 1em;
}
.btn { 
        
  /* 鼠标改成手的形状 */
  cursor: pointer;
}
</style>

2.注册组件: 创建后需要注册后再使用

全局入口在main.js, 在new Vue之上注册：

语法:

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

• main.js - 立即演示

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel'
// 3. 全局 - 注册组件
/* 语法: Vue.component("组件名", 组件对象) */
Vue.component("PannelG", Pannel)

全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template里用。

语法:

import 组件对象 from 'vue文件路径'

export default { 
        
    components: { 
        
        "组件名": 组件对象
    }
}

• 任意vue文件中中引入, 注册, 使用

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <!-- 4. 组件名当做标签使用 -->
    <!-- <组件名></组件名> -->
    <PannelG></PannelG>
    <PannelL></PannelL>
  </div>
</template>

<script>
// 目标: 局部注册 (用的多)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel_1'
export default { 
        
  // 3. 局部 - 注册组件
  /* 语法: components: { "组件名": 组件对象 } */
  components: { 
        
    PannelL: Pannel
  }
}
</script>

组件使用总结: 1.(创建)封装html+css+vue到独立的.vue文件中。 2.(引入注册)组件文件 => 得到组件配置对象。 3.(使用)当前页面当做标签使用。

目的: 解决多个组件样式名相同, 冲突问题

需求: div标签名选择器, 设置背景色。 问题: 发现组件里的div和外面的div都生效了。 解决: 给Pannel.vue组件里style标签上加scoped属性即可。

<style scoped>

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性。

而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到。 总结: style上加scoped, 组件内的样式只在当前vue组件生效

因为每个组件的变量和值都是独立的，组件通信先暂时关注父传子, 子传父：

• 父: 使用其他组件的vue文件
• 子: 被引入的组件(嵌入)

例如: App.vue(父) MyProduct.vue(子)

目的: 从外面给组件内传值, 先学会语法, 练习中在看使用场景。

需求: 封装一个商品组件MyProduct.vue - 外部传入具体要显示的数据, 如下图所示： 步骤: 1.创建组件components/MyProduct.vue - 复制下面标签。 2.组件内在props定义变量, 用于接收外部传入的值。 3.App.vue中引入注册组件, 使用时, 传入具体数据给组件显示。

• components/MyProduct.vue - 准备标签

<template>
  <div class="my-product">
    <h3>标题: { 
        { 
         title }}</h3>
    <p>价格: { 
        { 
         price }}元</p>
    <p>{ 
        { 
         intro }}</p>
  </div>
</template>

<script>
export default { 
        
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product { 
        
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

• App.vue中使用并传入数据

<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default { 
        
  data(){ 
        
    return { 
        
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: { 
        
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

总结: 组件封装复用的标签和样式, 而具体数据要靠外面传入。

目的: 把数据循环分别传入给组件内显示

数据:

list: [
  { 
         id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
  { 
         id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
  { 
         id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
],

正确代码：