vue组件

大家在学习vue后,肯定会需要封装一个组件

 

组件

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

组件化:封装的思想,把页面上可重新利用的部分封装为组件,从而方便项目的开发和维护.

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

1. 组件是什么?

   1. 可复用的vue实例, 封装标签, 样式, JS

2. 什么时候封装组件?

   1. 遇到重复标签, 可复用的时候

3. 组件好处?

   1. 各自独立, 互不影响

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

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

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

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

创建组件 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>

目录格式如上

把你要用的组件都放到components 方便寻找和使用

 使用方法

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

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

 其中组件名 和组件对象的名字事可以不一样的 我这里为了方便 使用同一个名字

注册组件的方式----局部注册及全局注册

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

Vue.component("PannelG", PannelG);//全局注册

 然后就可以用了

使用方法就是用组件名来当作标签来使用

也可以多个写出,他们互相之间都是独立的.

 效果如下

 

1. 创建和使用组件步骤?

   1. 创建.vue文件–标签–样式–JS进去

   2. 导入组件(import xxx from 'path/to/components/xxx.vue')

   3. 注册组件(全局/ 局部)

   4. 使用组件(组件名用作标签)

2. 组件运行结果?

   1. 把组件标签最终替换成, 封装的组件内标签

 scoped的使用

 然后在调用组件的时候可能会遇到一种问题,就是多个组件之间样式名字相同造成冲突问题

只需要在style 后面加一个scoped 即可实现避免冲突

他就把组件内的每一个样式都变成这种额外加入data自定义属性和时间戳混合使用的方法

解决了样式冲突的问题

1. Vue组件内样式, 只针对当前组件内标签生效如何做?

   1. 给style上添加scoped

2. 原理和过程是什么?

   1. 会自动给标签添加data-v-hash值属性, 所有选择都带属性选择