vue组件
含义
根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目开发维护。
vue中的组件化开发(形式)
规定:组件的后缀名为.vue,App.vue本质就是一个vue的组件。
3个组成部分
每个.vue组件都由三个组成部分构成
-
template:组件的模版结构
-
script:组件的JavaScript行为
-
style:组件的样式
template模板结构中应该只能包含一个根元素,因此若有多个应包含在一个大div中。
script部分
-
export default
:用于导出组件对象或实例,使其可以在其他文件中被引用和使用,并包含以下一切,将这些内容作为一个整体导出,以便在其他地方可以引用和使用该组件。它是将组件的逻辑部分进行封装和导出的关键。 -
data
:定义组件的初始数据。可以是一个对象或一个返回对象的函数。这些数据可以在组件的模板中进行绑定和显示。 -
computed
:定义计算属性,这些属性的值会根据依赖的数据动态计算而来。计算属性的结果会被缓存,只有依赖的数据发生变化时才会重新计算。 -
methods
:定义组件的方法。这些方法可以在组件的模板中绑定到事件或其他触发方式上,并用于处理用户交互、执行业务逻辑等操作。 -
watch
:用于观察和响应数据的变化。可以监听指定的数据或计算属性,当其发生变化时执行相应的操作。 -
created
、mounted
等生命周期钩子函数:这些函数会在组件的生命周期中被自动调用。可以在这些函数中执行一些初始化操作、发送异步请求、订阅事件等。 -
其他自定义的属性和方法:根据需要,可以在
<script>
部分定义其他自定义的属性和方法,用于组件的逻辑处理。
这些成分共同构成了Vue组件的逻辑部分,用于定义组件的数据、计算属性、方法以及生命周期等。通过在<script>
部分编写这些代码,可以实现组件的行为和功能,并与模板进行交互。
示例/分析
<template> <div class="test-box"> <h3>this is test{{ username }}</h3> <button @click="changeName">change name</button> </div> </template> <script> //export default{}每个script开头都必须要写 //export default 是 JavaScript 中用于导出默认值的语法。在 Vue 单文件组件中,export default 用于导出组件的定义。 //在 Vue 单文件组件中,export default 通常用于导出一个包含组件选项的对象。这个对象描述了组件的模板、逻辑和样式等内容,以便在其他地方引用和使用该组件。 export default { // 组件的逻辑部分 //在 Vue 2 的单文件组件中,data 选项必须是一个函数而不是一个对象。这是因为 Vue 2 使用 data 函数的返回值作为组件实例的数据对象,这样可以确保每个组件实例都有独立的数据副本,避免数据共享和潜在的问题。 //data数据源,'.vue'中的data不能指向对象,必须是一个函数 data() { //这个return出去的{}中,可以定义数据。 return { username: 'thisisname', }; }, methods:{ changeName(){ //在组件中,this就表示当前组件的实例对象。 //组件里的this指向组件的实例 console.log(this); this.username = "newname" } } }; </script> //启用less要添加lang="less" <style lang="less"> .test-box{ background-color: red; .h3{ color: white; } } </style>
组件使用的三个步骤
组件之间的父子关系
project-src-components
所有的组件都放在components里,App可以放到components外。
-
组件在被封装好之后:彼此之间是相互独立的,不存在父子关系。
-
在使用组件的时候:根据彼此的嵌套关系,形成了父子关系、兄弟关系。
三个步骤
-
使用import语法导入需要的组件,
import Left from '@/components/Left.vue'
。 -
使用 components 节点注册组件, 通过components注册的是私有子组件。
-
以标签的形式使用刚才注册的组件。
在组件 A 的 components 节点下,注册了组件 F。 则组件 F 只能用在组件 A 中;不能被用在组件 C 中。
<template> <div class="app-container"> <h1>App 根组件</h1> <button @click="flag = !flag">Toggle Flag</button> <Test info="你好" v-if="flag"></Test> <hr /> <div class="box"> <!-- 渲染 Left 组件和 Right 组件 --> <!-- 3. 以标签形式,使用注册好的组件 --> <Left1></Left1> <Right></Right> </div> </div> </template> <script> // 1. 导入需要使用的 .vue 组件 //左边的Left,Right仅是名字,但是名字须和components与div中的相同。 //通常情况下,`@`符号在Vue项目中被配置为指向项目的根目录。这样做的好处是,无论在项目的哪个文件中,都可以使用`@`符号来导入其他文件,而无需担心相对路径的复杂性。 import Left1 from '@/components/Left.vue' import Right from '@/components/Right.vue' import Test from '@/components/Test.vue' export default { data() { return { flag: true } }, // 2. 注册组件 components: { Left1, Right, Test } } </script>
注册全局组件
在vue项目的main.js入口文件中,通过Vue.component()方法可以注册全局组件。
-
'注册名称',尽量使用大写开头,例如:
MyCount
。 -
组件自己里使用自己会报错。
// 导入需要被全局注册的那个组件 import Count from '@/components/Count.vue' //参数1:字符串格式,表示组件的"注册名称" //参数2:需要被全局注册的那个组件,与import后相同 Vue.component('MyCount', Count)