vue组件

Vue组件

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

目标

提示：这里可以添加本文要记录的大概内容：

1、以前遇到重复的标签, 如何做的?
2、效率或独立性高吗, 担心变量重名?

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件导入

通过 import ‘组件名’ from ‘组件路径’

组件的注册

通过 components 属性

<template>
  <div id="app">
    <Pannel></Pannel>
  </div>
</template>

import Pannel from './components/Pannel';
export default {
  components: {
    //注册组件
    //'标签名': '组件名',
    Pannel: Pannel,
  },
};

二、组件的概念

1.作用

解决标签重用的问题(把重用的抽离出来，在封装到一个单独vue文件中 - 简称抽封)

2.好处

各自独立，便于复用

1、组件是可复用的 Vue 实例, 封装标签, 样式和 JS 代码。
2、组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的开发和维护。
3、一个页面， 可以拆分成一个个组件， 一个组件就是一个整体, 每个组件可以有自己独立的结构样式和行为(html, css 和 js)。

三、使用 (4个步骤)

1.创建组件

(新建vue文件，写好3部分代码)

2.导入组件

(import Xxx from相对路径’)

3.注册组件

全局注册 – main.js 中

import Vue from 'vue';
import App from './App.vue';
import 组件对象 from 'vue文件路径';
Vue.component('组件名', 组件对象);

局部注册 – 某.vue 文件内

import 组件对象 from 'vue文件路径';
export default {
  components: {
    PannelL: Pannel,
  },
};

4.使用组件

把组件当做一个自定义标签<rose></rose>

四、vue组件scoped的作用

属性：防止组件之间样式污染

<style scoped>

scoped的原理:
配合data-v-[hash:8]属性形成交集选择器，是因为这个属性是唯一的，所以选中的元素就是唯一的。