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]属性形成交集选择器,是因为这个属性是唯一的,所以选中的元素就是唯一的。