Vue基础--组件的创建和使用
一、组件化思想
一个页面中所有的处理概述逻辑全部放在一起，处理起来就会变得非常复杂，不利于后续的管理以及扩展。
但是，我们将一个页面逻辑复杂的页面拆分成一个个小的功能块，每个功能块只完成属于自己这部分独立的功能。
把大功能拆分成一个个小的功能，这样做不仅可以降低开发难度而且今后也更加易于维护。
二、Vue中的组件化方式
- 根组件
- 全局组件
- 局部组件
2.1 根组件
<div id="app">
<h2>{{message}}h2>
div>
<script src="../lib/vue.js">script>
<script>
// 1.根组件定义: App组件(根组件)
const App = {
data() {
return {
message: "Hello Vue"
}
}
}
// 2.创建app
const app = Vue.createApp(App)
// 3.挂载app
app.mount("#app")
script>
Vue实例的创建过程可以拆解成上面三个步骤。
createApp函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件。
组件化提供了一种抽象，让我们可以开发出一个个独立可复用小组件来构造我们的应用。
在Vue中，任何的应用都可以被抽象成一颗组件树。
2.2 全局组件
在任何其他的组件中都可以使用的组件。
<div id="app">
<product-item>product-item>
<product-item>product-item>
div>
<template id="item">
<div class="product">
<h2>我是商品h2>
<div>商品图片div>
<div>
商品价格:
<span>¥9.9span>
div>
<p>商品描述信息, 秒杀p>
div>
template>
<script src="../lib/vue.js">script>
<script>
// 1.组件: App组件(根组件)
const App = {}
// 2.创建app
const app = Vue.createApp(App)
// 3.注册一个全局组件 product-item
app.component("product-item", {
template: "#item"
})
// 2.挂载app
app.mount("#app")
script>
Vue通过app.component(组件名称, 组件的对象)的方式创建一个全局组件- 注册成功后，可以在任意其他组件的
template中使用，可以直接使用product-item的组件
2.3 局部组件
只有在注册的组件中才能使用的组件。
<div id="app">
<product-item>product-item>
div>
<template id="product">
<div class="product">
<h2>{{title}}h2>
<p>商品描述, 限时折扣, 赶紧抢购p>
<p>价格: {{price}}p>
<button>收藏button>
div>
template>
<script src="../lib/vue.js">script>
<script>
// 1.创建组件对象
const ProductItem = {
template: "#product",
data() {
return {
title: "我是product的title",
price: 9.9
}
}
}
const app = Vue.createApp({
// 在Vue实例中注册局部组件，哪个Vue实例需要用，就在哪个实例的components组件API中注册
components: {
ProductItem //es6写法ProductItem:ProductItem可以简写成ProductItem
}
})
// 2.挂载app
app.mount("#app")
script>
三、组件中的逻辑
<div id="app">
<HomeNav>HomeNav>
<home-nav>home-nav>
<product-item>product-item>
div>
<template id="nav">
<h2>导航栏h2>
template>
<template id="product">
<div class="product">
<h2>{{title}}h2>
<p>商品描述： 限时折扣p>
<p>价格: {{price}}p>
<button @click="favarItem">收藏button>
div>
template>
<script src="../lib/vue.js">script>
<script>
// 1.创建一个Vue的app实例
const app = Vue.createApp({
data() {
return {
message: "Hello Vue"
}
},
})
// 2.注册全局组件product-item，并编写它的逻辑
app.component("product-item", {
template: "#product",
data() {
return {
title: "我是商品Item",
price: 9.9
}
},
methods: {
favarItem() {
console.log("收藏了当前的item")
}
}
})
app.component("HomeNav", {
template: "#nav"
})
// 2.挂载app
app.mount("#app")
script>
组件本身也可以有自己的代码逻辑：
比如data、computed、methods、watch等等，根组件中能够使用的选项API，其它组件中也可以使用。
在实际开发中，基本都是注册局部组件来进行开发。
四、组件名称的规则
-
使用
kebab-case（短横线分割符）-
引用这个自定义元素时也必须使用短横线分割符，例如
<product-item>product-item> <script> app.component("product-item", { template: "#item" }) script>
-
-
使用
PascalCase（驼峰命名法）-
引用这个自定义元素时两种命名法都可以使用
-
也就是说
Vue解析的；<product-item>product-item> <productItem>productItem> <script> app.component("productItem", { template: "#item" }) script>
-
五、组件的样式
开发时，根组件中会引入很多其它的组件。难免会出现样式命名冲突的问题。
特别是当项目很大时，根本不清楚哪些样式会影响到其它组件，造成样式难以维护。
为了解决这个问题，我们应该让每个组件的样式设置作用域，让自己组件的样式只作用于当前组件。
<template>
<div class="app">
<h2 class="title">我是App.vue中的h2元素h2>
div>
template>
<script>
export default {
name: 'App',
}
script>
<style scoped>
.title {
color: red;
}
style>
只要在style标签上设置scoped属性就可以让样式只会当前组件生效，而不会影响其它组件。
今后几乎所有的组件样式标签，都是要加上它来防止样式对其它组件造成影响。