10、VUE组件基本使用

在原生的JavaScript中，当我们需要使用重复使用标签的时候，大多数情况下我们会使用复制粘贴的方法。
在vue中我们使用组件的方式，可以有效的解决代码片段的重复使用。

1、组件的引入

【实现多个折叠面板】：不使用组件：

<!--
 * @Author: your name
 * @Date: 2022-03-12 08:50:07
 * @LastEditTime: 2022-03-12 15:44:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: componentstestsrcApp.vue
-->
<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <!-- 1.绑定点击事件 -->
        <span class="btn" @click="btn">
          <!-- 4. 根据isShow的值显示不同文字 -->
          {{ isShow ? '收起' : '展开'}}
        </span>
      </div>
      <!-- 2. v-show配合变量来控制标签隐藏出现 -->
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>

        <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <!-- 1.绑定点击事件 -->
        <span class="btn" @click="btn">
          <!-- 4. 根据isShow的值显示不同文字 -->
          {{ isShow ? '收起' : '展开'}}
        </span>
      </div>
      <!-- 2. v-show配合变量来控制标签隐藏出现 -->
      <div class="container" v-show="isShow1">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>

        <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <!-- 1.绑定点击事件 -->
        <span class="btn" @click="btn">
          <!-- 4. 根据isShow的值显示不同文字 -->
          {{ isShow ? '收起' : '展开'}}
        </span>
      </div>
      <!-- 2. v-show配合变量来控制标签隐藏出现 -->
      <div class="container" v-show="isShow2">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      isShow1:true,
      isShow2:true
    }
  },
  methods: {
    btn(){
      // 3. 点击时, 把值改成false
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .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>

【使用组件】：

• Panel.vue

  芙蓉楼送辛渐

2、组件的基本概念

组件是可复用的Vue实例，封装了标签、样式和JavaScript代码

组件化思想：封装的思想就是将页面中重复使用的部分进行封装为组件

一个页面可以拆分为多个组件进行拼凑

1、组件化图解

2、使用场景

• 需要重复使用某些标签的时候
• 需要组件化开发的时候

3、组件的好处

• 提高了代码的复用性
• 各自独立，互不影响

3、组件的基本使用

1、创建组件

2、注册组件

1、全局注册

【语法】：
在main.js中进行如下操作

import 组件对象 from 组件路径

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

【演示】：

• 创建组件

  芙蓉楼送辛渐

2、局部注册

具体可以参考第一部分，组件的引入

总结：组件的基本使用步骤
1、创建组件
2、全局或局部引入组件
3、全局或局部注册组件
4、使用组件

4、组件中的- scoped作用

保证样式只对当前的页面生效

准备: 当前组件内标签都被添加 data-v-hash值 的属性

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

5、组件通信

组件之间是相互独立的，互不影响的，但是当我们需要在组件之间传递数据的时候该如何实现呢？

在vue中提供了组件通信的方法来进行组件之间的相互传值

1、父组件向子组件传值

【步骤】：

• 在子组件中定义接收父组件传递的数据的变量

  export default {
  props: [“title”, “price”, “intro”],
  };

• 父组件开始传值

2、父组件向子组件传值结合循环使用

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

<script>
// 导入组件
import MyProduct from "@/components/MyProduct";
export default {
  // 数据
  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: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },

  // 组件
  components: {
    MyProduct,
  },
};
</script>

<style>
</style>

3、组件的单向数据流

从父组件到子组件的数据流向就叫做单项数据流

• 组件

  标题：{{ title }}

  价格：{{ price }}￥

  折扣：{{ intro }}

4、子组件向父组件传值_自定义事件

通过子组件触发夫组件自定义事件方法 实现商品组件的砍价

【语法】：

@自定义事件名 = "父methods中的函数名"

• 子组件

  标题：{{ title }}

  价格：{{ price }}￥

  折扣：{{ intro }}

当子组件需要修改父组件中的数据的时候使用子组件向父组件传值技术
使用步骤：
1、父组件内部给子组件绑定自定义事件
2、在子组件中使用 . e m i t ( ) 函 数 触 发 父 组 件 的 自 定 义 事 件 t h i s . .emit()函数触发父组件的自定义事件 this. .emit()函数触发父组件的自定义事件this.emit(‘自定义事件名’，值)

5、跨组件传值

【图解】：

【核心】：

• EventBus/index.js- 定义事件总线bus对象

  import Vue from ‘vue’
  // 导出空白vue对象
  export default new Vue()

• components/MyProduct_sub.vue

  标题: {{ title }}

  价格: {{ price }}元

  {{ intro }}

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的Gitee获取。
还有 高级java全套视频教程 java进阶架构师 视频+资料+代码+面试题！

全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。