vue组件

在main.js中进行渲染

 

---

 组件化开发的思想

 组件化开发：指的是根据封装的思想，把页面上重复使用到的部分封装为组件，从而方便项目的开发和维护。

组件化开发的好处：提高前端代码的复用性和灵活性、提升了开发效率和后期的可维护性。

vue中的组件化开发：vue是一个完全支持组件化开发的框架。vue中规定组件的后缀名是 .vue。App.vue的本质就是一个vue的组件。

---

vue组件组成结构

例如 ：

有template部分，是组件的模板结构，它是必须存在的，其他的两个部分script和style是可选的，所以里面也可以不写东西。

甚至可以直接不写script和style。像这样子：

 

---

细讲template节点

 ❗ 只起到包裹性质的作业。

 在template中定义根节点

在vue3中，可以定义多个根节点，而vue2的template中所有内容必须包含在同一个根节点中，且有且仅有这一个根节点。

---

细讲script节点

作用和html里的script作用是一样的，但是写法有些不一样噢。

 用法展示：

 路由声明，export default导出，name设置组件名称，data节点，components组件，methods方法。

tip：

1.组件的名称

name属性指向的是当前组件的名称（建议是把每个单词的首字母大写）

作用:

演示：

2. 组件的数据

vue组件渲染期间需要用到的数据，可以定义在data节点中

格式：（记得要加return ,data指向一个函数，函数直接返回对象的形式噢）

data{
  return {
    a：xxx,
  }
}

不加return，直接指向数据的话会报错的

3. method节点

组件中的事件处理函数，必须定义到methods节点中。

可以带参数，无需写参数类型，直接写接收参数的参数名称。 

---

细讲style节点

默认为css语法，和之前写javaweb是一样的，给不同选择器定义不同样式。

如果用less语法

 less语法可嵌套，展示：

注意这里的<h1>标签中还有个<i>标签 

less语句，可以在h1的样式中再设置它里面的 i 的样式。

得到的效果：

---

✅组件的基本使用

-组件的注册

那么如何全局注册组件？

声明路由后，用app.component('标签形式'，组件名字)

tip：自定义的标签形式建议两个单词之间用-连字符连接。

 在main.js中声明了全局组件之后，直接以标签的形式进行使用即可！

那么如何局部注册组件？

在vue文件中声明路由（导入），组件。 

实际使用展示：

那么全局注册和局部注册有什么区别？

显而易见

对应的应用场景：

---

 组件命名规范

 帕斯卡命名法，比如我命名为MyApp，那么我既可以<MyApp></MyApp>这样子使用，也可以<my-app></my-app>这样子使用，适用性更强，所以开发中推荐使用帕斯卡命名法。

也可以通过name属性注册主键，直接文件名.name即可。

 这样子写会更加的方便，统一。

---

 组件之间样式冲突问题

 如何解决？

前面写项目的过程中碰到过这个问题，已经解决了。当时是为style添加了scoped属性将样式规定是局部样式解决的。

当然，也可以像写web项目时一样，设置不同的class，通过class选择器，分辨不同的css样式。

但是有时候我们希望部分样式可以在自组件中起作用，这个时候就需要用到 /deep/ 样式穿透

⚠

---

 组件的props

 什么是组件的props？

 

 可以通过props把要的值传递给组件，这点是尊的很妙哉！

❗❗❗

如何使用props给组件传值？

需要在组件内部声明props！通过props数组的方式声明。

 实际运用展示：

子组件

根组件

 

如何动态绑定props的值？

实际操作展示：

props的大小写命名？

和帕斯卡类似，也是可以变通的。但只是在传递属性时可以改变写法，在当前组件中必须严格按照定义的名称使用。

---

动态绑定HTML的class

基本操作：

 以数组语法绑定HTML的class

 不同三元表达式之间用逗号隔开，整体用方括号包裹。

 以对象语法绑定HTML的class

当对象作为class的值时，内部元素为true时运用该元素作为类名之一，反之不作为。 

以对象语法绑定内联的style

---

总结