封装vue2局部组件都要注意什么

一. 关于局部组件组成的三个部分(template, script, style)

  1. template  =>  组件的模板结构  (必选)

  • 每个组件对应的模板结构,需要定义到template节点中
<template><!-- 当前组件的dom结构,需要定义到template结构的内部 -->
</template>
  • template中使用的指令
<template><!-- 【1.内容渲染指令】 --><span v-text="msg"></span><span>{{msg}}</span><div v-html="html"></div><!-- 【2.属性绑定指令】 --><img v-bind:src="imageSrc"><!-- 【3.双向指令绑定指令】 --><select v-model=""></select><!-- 【4.循环渲染指令】 --><div v-for="(item, index) in items"></div><!-- 【5.条件渲染】 --><div v-if="Math.random() > 0.5">Now you see me</div><div v-else-if="type === 'B'"></div><div v-else>Now you don't</div>
</template>
  • template定义根节点

注:vue 2.x版本中,<template>节点内dom结构仅支持单个根节点;但在vue 3.x版本中,支持多个根节点

  1. script  =>  组件的javascript行为  (可选)

  • script中的data节点(可以定义当前组件渲染期间需要用到的数据对象;data是一个函数)
  • script中的methods节点(可以定义组件中的事件处理函数)
  1. style  =>  组件的样式  (可选)

  • style的lang属性支持可选值css,less,sass,scss
  • 当使用less或sass时,要先安装less或sass依赖,再设置lang的属性值为less或sass
  • scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,弥补sass和css之间的鸿沟
  • 合理使用scoped,因为使用scoped可以让样式只对当前组件生效

二. 关于生命周期

  • beforeCreate
  • created
  • beforeMounted
  • mounted
  • beforeUpdate
  • updated
  • beforeDestory
  • destoryed

created和mounted的区别:created在模板渲染成html前调用,mounted在模板渲染成html后调用

三. 关于父子组件的传值

封装出来的通用组件叫子组件,引用通用组件的界面叫做父组件,组件的封装必须高性能低耦合

1. 父组件向子组件传参用props

<!-- 父组件 -->
<template><Child :articleList="articleList"></Child>
</template><!-- 子组件 -->
<template><div><ul><li v-for="(value,index) in articleList" :key="index">{{value}}</li></ul></div>
</template><script>export default {name: "Child",props: {articleList: {type: array,default: function () {return []}    }},//接收父组件传来的数据articleList}
</script>

2. 子组件向父组件传参用emit

<!-- 父组件 -->
<template><common-dialog @pushId="getId"></common-dialog>
</template>
<script>methods: {getId (id) {}}
</script><!-- 子组件 -->
<template><div><input type="button" @click="emitIndex(id)" value="向父组件发送数据"></div>
</template>
<script>export default {methods: {emitIndex (id) {this.$emit('pushId', id)}}}
</script>

四. 关于computed与watch

1. computed与watch的区别:

  • computed是计算属性,watch是监听,监听data中的数据变化
  • computed支持缓存,即当其依赖的属性值发生变化时,计算属性会重新计算,反之则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行
  • computed不支持异步,有异步操作时无法监听数据变化;watch支持异步

2. computed与watch的使用场景

  • computed的使用
<template><div>{{ changewords }}</div>
</template>
<script>export default {data () {myname: 'aBcDEf'},computed: {changewords(){return this.myname.substring(0,1).toUpperCase()}}   }
</script>
  • watch的使用
<template><div><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p></div>
</template>
<script>export default{data () {firstName: 'Dawei',lastName: 'Lou',fullName: ''},watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}// firstName: {//     handler(newName, oldName) {//        this.fullName = newName + ' ' + this.lastName;//     },//     immediate: true// }}}
</script>

五. 关于mixin

局部混入中mixin的文件就是一个对象,这个对象可以包含vue组件的一些常见的配置,包括data,methods,生命周期的钩子函数等等。

不同组件中的mixin是相互独立的。

  • mixin的使用

<!-- 引用mixins的文件 -->
<script>import queryList from "@/common/mixin/queryList";export default{mixins: [queryList]}
</script><!-- mixins的文件 -->
export const mixins = {data() {return {};},computed: {},created() {},mounted() {},methods: {},
};

六. 关于slot的使用

<!-- 子组件使用插槽slot   Link.vue-->
<template><a :href="href" rel="external nofollow"  class="link"><!-- 留个插槽,外界传入内容放置在这里 --><slot></slot></a>
</template><!-- 父组件调用子组件 -->
<template><div class="app"><Link href="https://baidu.com" rel="external nofollow" > 百度</Link><Link href="https://google.com" rel="external nofollow"  style="margin-top: 10px"><!-- 这里允许放置任意的内容,包括字符串和标签 --><span>Icon</span>谷歌</Link</Link></div>
</template>

七. 关于vuex

vuex的五个组成部分:state,mulations,action,getters,modules

  • state:定义了应用程序的状态,即要管理的数据
const store = new Vuex.Store({state: {count: 0}
})
  • getters:用于获取state中的状态,类似vue组件中的计算属性
const store = new Vuex.Store({state: {count: 0},getters: {doubleCount(state) {return state.count * 2}}
})
  • mulations:修改state的数据
const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++},add(state, payload) {state.count += payload}}
})
  • action:用于异步操作和提交mulations,在actions中可以进行任何异步操作,最后再提交到mulations中同步修改state
const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {incrementAsync(context) {setTimeout(() => {context.commit('increment')}, 1000)}}
})
  • modules:用于将store分割成模块,每个模块都拥有自己的state, getters, mulations, action和子模块,以便提高应用程序的可维护性
const store = new Vuex.Store({modules: {cart: {state: {items: []},mutations: {addItem(state, item) {state.items.push(item)}},actions: {addAsyncItem(context, item) {setTimeout(() => {context.commit('addItem', item)}, 1000)}}}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/41494.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java SPI加载机制

SPI加载机制 SPI&#xff08;Service Provider Interface&#xff09;是一种通过外界配置来加载具体代码内容的技术手段。SPI是JDK内置的一种服务提供发现机制&#xff0c;用于实现框架的扩展和组件替换。 在SPI中&#xff0c;框架提供一整套接口&#xff0c;使用者实现这些接…

React源码解析18(8)------ 实现单节点的Diff算法

摘要 经过之前的几篇文章&#xff0c;我们已经实现了一个可以进行更新渲染的假React。但是如果我们把我们的jsx修改成这样&#xff1a; function App() {const [age, setAge] useState(20)const click function() {setAge(age 1)}return age % 2 0 ? jsx("div"…

学习红外成像仪开发注意要点

学习红外成像仪开发注意要点 三河凡科科技飞讯红外成像仪开发学习注意要点 红外成像仪是一种高级的光学设备&#xff0c;可用于探测、分析和显示红外辐射&#xff0c;它广泛应用于医学、军事、石油、矿产资源勘探等领域。红外成像仪的开发需要注意以下几个方面&#xff1a; 1…

(搜索) 剑指 Offer 12. 矩阵中的路径 ——【Leetcode每日一题】

❓剑指 Offer 12. 矩阵中的路径 难度&#xff1a;中等 给定一个 m * n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构…

使用Rust编写的一款使用遗传算法、神经网络、WASM技术的模拟生物进化的程序

模拟生物进化程序 Github地址&#xff1a;FishLife 期待各位的star✨✨✨ 本项目是一个模拟生物进化的程序&#xff0c;利用遗传算法、神经网络技术对鱼的眼睛和大脑进行模拟。该项目是使用 Rust 语言编写的&#xff0c;并编译为 WebAssembly (Wasm) 格式&#xff0c;使其可以…

QT学习方法

1 .类的学习方法 第一步:从UI文件中,找到界面的类—QMainWindow第二步:在Qt Creator工具中,找到“帮助”按钮,进入到帮助菜单界面,在选择"索引",在Look for:输入类名,找到类名,双击条目中的类名,在右侧会显示出来类的详细内容第三步:在右侧,可根据内容目录…

Spring项目使用Redis限制用户登录失败的次数以及暂时锁定用户登录权限

文章目录 背景环境代码实现0. 项目结构图&#xff08;供参考&#xff09;1. 数据库中的表&#xff08;供参考&#xff09;2. 依赖&#xff08;pom.xml&#xff09;3. 配置文件&#xff08;application.yml&#xff09;4. 配置文件&#xff08;application-dev.yml&#xff09;5…

Camera Link 接口

Camera Link是一个标准的接口协议&#xff0c;用于高速的图像数据传输&#xff0c;常被用在工业相机和图像处理系统之间。这个标准由自动视觉协会&#xff08;Automated Imaging Association&#xff0c;简称AIA&#xff09;在2000年发布&#xff0c;旨在实现各种厂家之间的高性…

在ubuntu+cpolar+rabbitMQ环境下,实现mq服务端远程访问

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…

使用opencv4.7.0部署yolov5

yolov5原理和部署原理就不说了&#xff0c;想了解的可以看看这篇部署原理文章 #include <fstream> #include <sstream> #include <iostream> #include <opencv2/dnn.hpp> #include <opencv2/imgproc.hpp> #include <opencv2/highgui.hpp>/…

【Java转Go】快速上手学习笔记(二)之基础篇一

目录 创建项目数据类型变量常量类型转换计数器键盘交互流程控制代码运算符 创建项目 上篇我们安装好了Go环境&#xff0c;和用IDEA安装Go插件来开发Go项目&#xff1a;【Java转Go】快速上手学习笔记&#xff08;一&#xff09;之环境安装篇 。 这篇我们开始正式学习Go语言。我…

MyBatis动态SQL:打造灵活可变的数据库操作

目录 if标签trim标签where标签set标签foreach标签 动态SQL就是根据不同的条件或需求动态地生成查询语句&#xff0c;比如动态搜索条件、动态表或列名、动态排序等。 if标签 在我们填写一些信息时&#xff0c;有些信息是必填字段&#xff0c;有的则是非必填的&#xff0c;这些…

淘宝API接口的实时数据和缓存数据区别

电商API接口实时数据是指通过API接口获取到的与电商相关的实时数据。这些数据可以包括商品库存、订单状态、销售额、用户活跃度等信息。 通过电商API接口&#xff0c;可以实时获取到电商平台上的各种数据&#xff0c;这些数据可以帮助企业或开发者做出及时的决策和分析。例如&…

vue动态修改audio地址

问题&#xff1a;点击后替换url地址&#xff0c;实现了&#xff0c;但是播放器依旧没有反应。 解决&#xff1a;vue中动态替换只是替换了地址&#xff0c;并没有告诉audio标签是否要执行&#xff0c;执行什么操作。要load后才能让它知道&#xff0c;是在喊他&#xff0c;他需求…

秒懂算法 | 汉诺塔问题与木棒三角形

在数学与计算机科学中&#xff0c;递归(recursion)是指一个过程或函数在其定义或说明中又直接或间接调用自身的一种方法。它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算&#x…

Android性能优化——线程优化

一、线程调度原理 在任意时刻&#xff0c;CPU只能执行一条指令&#xff0c;每个线程获取到CPU的使用权之后才可以执行指令也就是说在任意时刻&#xff0c;只有一个线程占用CPU 处于运行状态 多线程并发&#xff0c;实际上是指多个线程轮流获取CPU 的使用权然后分别执行各自的任…

系统安全测试要怎么做?

进行系统安全测试时&#xff0c;可以按照以下详细的步骤进行&#xff1a; 1、信息收集和分析&#xff1a; 收集系统的相关信息&#xff0c;包括架构、部署环境、使用的框架和技术等。 分析系统的安全需求、威胁模型和安全策略等文档。 2、威胁建模和风险评估&#xff1a; 使…

调用被fishhook的原函数

OC类如果通过runtime被hook了&#xff0c;可以通过逆序遍历方法列表的方式调用原方法。 那系统库的C函数被fish hook了该怎么办呢&#xff1f; 原理和OC类异曲同工&#xff0c;即通过系统函数dlopen()获取动态库&#xff0c;以动态库为参数通过系统函数dlsym()即可获取目标系统…

leetcode292. Nim 游戏(博弈论 - java)

Nim 游戏 Nim 游戏题目描述博弈论 上期经典算法 Nim 游戏 难度 - 简单 原题链接 - Nim游戏 题目描述 你和你的朋友&#xff0c;两个人一起玩 Nim 游戏&#xff1a; 桌子上有一堆石头。 你们轮流进行自己的回合&#xff0c; 你作为先手 。 每一回合&#xff0c;轮到的人拿掉 1 -…

494. 目标和

494. 目标和 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;数组回溯法动态规划 参考代码&#xff1a;数组回溯法__494目标和__动态规划 经验吸取 原题链接&#xff1a; 494. 目标和 https://leetcode.cn/problems/target-sum/description/ 完成情况&#…