位置: IT常识 - 正文

【Vue】 组件封装(vue组件封装步骤)

编辑:rootadmin
【Vue】 组件封装 目录1 组件封装1.1 全局注册1.2 局部注册1.2.1 命名1.2.2 引用组件1.2.2.1 传统写法1.2.2.2 setup1.2.2.3 easycom1.3 父子组件间的数据传递1.3.1 子组件 data() 中设置数据1.3.2 父组件通过 prop 将数据传递给子组件1.3.3 子组件不能直接修改 prop 中的值1.3.4 子组件通过 emit 事件将子组件数据传递给父组件1.3.5 父组件通过 prop 把改变的值传到子组件中1.3 父子组件双向数据绑定1.3.1 v-model1 组件封装

推荐整理分享【Vue】 组件封装(vue组件封装步骤),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:封装vue组件,vue组件封装注意事项,vue组件封装视频,vue组件怎么封装,vue组件封装原则,vue 组件封装应该遵循 什么样的设计模式,vue中组件封装,vue组件封装步骤,内容如对您有帮助,希望把文章链接给更多的朋友!

vue 官网 组件基础

需要封装的情况组件复用模块化另: 修改子组件时,有时需重新运行才有效果1.1 全局注册<fzzz></fzzz>;import yyy from "./components/xxx.vue";Vue.component("zzz", yyy);yyy 不能有 -fzzz 只与 zzz 有关// main.jsimport inputSearch from "./components/inputSearch.vue";Vue.component("inputSearch", inputSearch); // 3 种, i 开头Vue.component("input-search", inputSearch); // <input-search></input-search>Vue.component("input-Search", inputSearch); // <input-Search></input-Search>Vue.component("InputSearch", inputSearch); // 6 种Vue.component("Input-search", inputSearch); // <Input-search></Input-search>Vue.component("Input-Search", inputSearch); // <Input-Search></Input-Search>// main.jsimport InputSearch from "./components/inputSearch.vue";Vue.component("inputSearch", InputSearch); // 3 种, i 开头Vue.component("input-search", InputSearch); // <input-search></input-search>Vue.component("input-Search", InputSearch); // <input-Search></input-Search>Vue.component("InputSearch", InputSearch); // 6 种Vue.component("Input-search", InputSearch); // <Input-search></Input-search>Vue.component("Input-Search", InputSearch); // <Input-Search></Input-Search>1.2 局部注册1.2.1 命名

建议使用大驼峰,因为这提高了模板的可读性,能帮助我们区分 Vue 组件和原生 HTML 元素。

<fyyy></fyyy>;import yyy from "@/components/xxx.vue";components: { yyy;}yyy 不能有 -fyyy 只与 components:{} 的 yyy 有关<inputSearch></inputSearch><input-search></input-search><input-Search></input-Search>import inputSearch from "@/components/inputSearch.vue"import inputSearch from "@/components/input-search.vue"import inputSearch from "@/components/input-Search.vue"import inputSearch from "@/components/InputSearch.vue"import inputSearch from "@/components/Input-search.vue"import inputSearch from "@/components/Input-Search.vue"components: { inputSearch }<InputSearch></InputSearch><Input-search></Input-search><Input-Search></Input-Search><inputSearch></inputSearch><input-search></input-search><input-Search></input-Search>import InputSearch from "@/components/inputSearch.vue"import InputSearch from "@/components/input-search.vue"import InputSearch from "@/components/input-Search.vue"import InputSearch from "@/components/InputSearch.vue"import InputSearch from "@/components/Input-search.vue"import InputSearch from "@/components/Input-Search.vue"components: { InputSearch }1.2.2 引用组件【Vue】 组件封装(vue组件封装步骤)

uniapp 官网 引用组件

1.2.2.1 传统写法child.vue导入 : import child from '@/components/child.vue';局部注册 : components: { child },使用 : <child></child>

1.2.2.2 setupchild.vue<script setup></script>导入 : import child from '@/components/child.vue';使用 : <child></child>

1.2.2.3 easycomchild.vue 组件放在项目的 components 文件夹下,符合 components/组件名称/组件名称.vue 的目录结构,可直接引用使用 : <child></child>

1.3 父子组件间的数据传递父组件通过 prop 将数据传递给子组件子组件通过 emit 事件将子组件数据传递给父组件子组件不能直接修改 prop 中传给父组件的值1.3.1 子组件 data() 中设置数据// 子组件<view>{{ name }}</view>// data()data() {return {name: 'xxx'}},// 父组件<child></child>1.3.2 父组件通过 prop 将数据传递给子组件// 子组件<view>{{ name }}</view>// propsprops: {name: {type: String,default: ''},},// 父组件<child name="xxx"></child>1.3.3 子组件不能直接修改 prop 中的值// 子组件<view @click="getValue">{{ name }}</view>// propsprops: {name: {type: String,default: ''},},methods:{getValue() {this.name = "yyy"; // 报错}}// 父组件<child name="xxx"></child>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PePniYhx-1662716305299)(app_files/2.jpg)]

1.3.4 子组件通过 emit 事件将子组件数据传递给父组件this.$emit(“fun1”, param); //其中 fun1 为父组件定义函数,param 为需要传递参数// 子组件<view @click="getValue">{{ name }}</view>// data()、methodsdata() {return {name: 'xxx'}},methods: {getValue() {this.$emit('change', this.name)}}// 父组件<child @change="getName"></child>// methodsmethods: {getName(value) {console.log(value);}}1.3.5 父组件通过 prop 把改变的值传到子组件中// 子组件<view @click="getValue">{{ name }}</view>//props: {undataName: {type: String,default: ''},},data() {return {name: ''}},methods: {getValue() {this.$emit('change', this.name)this.name = this.undataName;}}// 父组件<child @change="getName" undataName="yyy"></child>// methodsmethods: {getName(value) {console.log(value);}}1.3 父子组件双向数据绑定1.3.1 v-model

Vue 父子组件如何双向绑定传值 Vue 官网 表单输入绑定

<input v-model="text"> 相当于 <input :value="text" @input="event => text = event.target.value">

父组件使用子组件时,直接用 v-model 双向绑定 <child v-model="name"></child><!-- 子组件 --><template> <input :value="name" @input="onInput" /></template><script> export default { model: { prop: "name", //这个字段,是指父组件设置 v-model 时,将变量值传给子组件的 name event: "getName", //这个字段,是指父组件监听 getName 事件 }, props: { name: { type: String, default: "", }, }, methods: { onInput(e) { this.$emit("getName", e.target.value); console.log(e.target.value); }, }, };</script>// 父组件<template> <view> <child v-model="name"></child> </view></template><script> import child from "@/components/child.vue"; export default { components: { child, }, data() { return { name: "xxx", }; }, watch: { name(value) { console.log(value, "--value"); }, }, };</script>
本文链接地址:https://www.jiuchutong.com/zhishi/297771.html 转载请保留说明!

上一篇:json-server|0编码实现REST API(json_server)

下一篇:【GPT4】微软 GPT-4 测试报告(1)总体介绍(微软 gcr)

  • 戴尔笔记本摄像头设置在哪里打开(戴尔笔记本摄像头)

    戴尔笔记本摄像头设置在哪里打开(戴尔笔记本摄像头)

  • 荣耀30pro带面部识别的吗(荣耀30pro有面容支付吗)

    荣耀30pro带面部识别的吗(荣耀30pro有面容支付吗)

  • 荣耀30s可以支持NFC吗(荣耀30s可以支持无线充电吗)

    荣耀30s可以支持NFC吗(荣耀30s可以支持无线充电吗)

  • 苹果xsmax跟11的区别

    苹果xsmax跟11的区别

  • 央视影音tv版hd版区别

    央视影音tv版hd版区别

  • 小米实体店可以免费贴膜吗(小米实体店可以分期吗)

    小米实体店可以免费贴膜吗(小米实体店可以分期吗)

  • 拍抖音怎么上热门(拍的抖音怎么上热门?发布时要注意这3点!)

    拍抖音怎么上热门(拍的抖音怎么上热门?发布时要注意这3点!)

  • ipad7代叫什么(ipad7代是ipad2019吗)

    ipad7代叫什么(ipad7代是ipad2019吗)

  • wifi一会能用一会不能用怎么回事(wifi一会能用一会感叹号)

    wifi一会能用一会不能用怎么回事(wifi一会能用一会感叹号)

  • 无线网密码改了后不能联网怎么办(无线网密码改了,电脑怎么重新连接)

    无线网密码改了后不能联网怎么办(无线网密码改了,电脑怎么重新连接)

  • 苹果闪电转是什么意思(iphone的闪电转是快充吗)

    苹果闪电转是什么意思(iphone的闪电转是快充吗)

  • qq屏幕共享在手机或者平板上可以用吗(手机qq屏幕共享需要什么权限)

    qq屏幕共享在手机或者平板上可以用吗(手机qq屏幕共享需要什么权限)

  • 为什么手机可以上网却打不了电话(为什么手机可以用wifi但是电视显示无网络)

    为什么手机可以上网却打不了电话(为什么手机可以用wifi但是电视显示无网络)

  • 苹果care版什么意思(苹果care+有什么用)

    苹果care版什么意思(苹果care+有什么用)

  • 打印机编号怎么查看(打印机编号怎么打印)

    打印机编号怎么查看(打印机编号怎么打印)

  • 被拼多多无缘无故扣钱(拼多多无缘无故把我订单取消了)

    被拼多多无缘无故扣钱(拼多多无缘无故把我订单取消了)

  • vivo怎么将软件移到内存卡(vivo怎么将软件隐藏起来)

    vivo怎么将软件移到内存卡(vivo怎么将软件隐藏起来)

  • 手机淘宝怎么没有家乡版了(手机淘宝怎么没有必备工具)

    手机淘宝怎么没有家乡版了(手机淘宝怎么没有必备工具)

  • 微信3000步是多少公里(微信步数3000步是多远)

    微信3000步是多少公里(微信步数3000步是多远)

  • xsmax支持18w快充吗

    xsmax支持18w快充吗

  • access2002的报表由什么组成(access怎么设置报表显示内容)

    access2002的报表由什么组成(access怎么设置报表显示内容)

  • WPS表格怎么合并单元格(wps表格怎么合并行和列)

    WPS表格怎么合并单元格(wps表格怎么合并行和列)

  • 荣耀20有没有耳机接口(荣耀20有没有耳机弹窗功能)

    荣耀20有没有耳机接口(荣耀20有没有耳机弹窗功能)

  • 独特的巧克力山,菲律宾薄荷岛 (© Danita Delimont/Offset by Shutterstock)(巧克力山介绍)

    独特的巧克力山,菲律宾薄荷岛 (© Danita Delimont/Offset by Shutterstock)(巧克力山介绍)

  • 增值税留抵抵欠情况说明怎么写
  • 增值税申报表出口退税
  • 企业生产经营管理包括哪些
  • 换了公司后个税还要申请申报吗
  • 土地增值税间接费用扣除
  • 对公账户给私人转账手续费
  • 建房测绘收费
  • 工商年报的应交税费包含哪些
  • 经营性文化事业单位有哪些
  • 仓库物料入库
  • 周转材料低值易耗品
  • 未分配利润应该在借方还是贷方??
  • 小规模纳税人开专票
  • 未确认收入的增值税怎么记账
  • 撤回投资属于什么会计科目
  • 暂估成本和实际成本的分录
  • 计提增值税的账务处理小规模
  • 认购价和发行价的差价
  • 公司内收取的礼金
  • win11和win10哪个玩游戏好
  • 期末余额和期初余额
  • 小规模纳税人免增值税的账务处理
  • 误删开始菜单
  • pruttct.exe - pruttct是什么进程 有什么用
  • ubuntu16.04lts
  • 怎么用老毛桃u盘装win7系统 老毛桃u盘装win7系统教程图解
  • php语句和php变量都是区分大小写的
  • 企业所得税的税率是多少
  • php输入框input代码
  • php image
  • php脚本工作流程
  • 最好的ph计
  • 运输费计税吗
  • uniapp支付宝支付开发
  • 增值税专用发票和普通发票的区别
  • 非本公司员工能上班吗
  • 增值税的征收范围包括销售不动产
  • mysql存储过程 游标
  • 收到生育津贴如何入账
  • 申报错误后处理有影响吗
  • 预付房租的账务处理
  • 一般纳税人无票收入怎么做账分录呢
  • 以前年度损益调整是什么意思
  • 折扣如何做账
  • 工程结算审核资料清单
  • 发票金额和付款金额差几毛钱
  • 财务费用具体包括
  • 自产商品无偿赠送是否确认收入
  • 电子承兑被拒付(可拒付追索)
  • 五金领用流程
  • 事业单位无形资产摊销是当月还是下月
  • 房地产开发企业建造的商品房,在出售前
  • 发票盖发票专用章
  • mysql error0
  • mac如何隐藏桌面
  • 今后64位Win10 Mobile将是未来重点
  • windowsxp删除所有文件
  • ubuntu怎么打开系统设置
  • windowsxp的开始菜单
  • linux的hostname(主机名)修改详解
  • linux下4种kill某个用户所有进程的方法
  • win7更改文件名的方法
  • linux sort命令参数及用法详解
  • centos soft lockup
  • mysqld是什么进程
  • linux 文件数量 命令
  • GLWallpaperService分析一
  • js设置iframe隐藏
  • apache使用端口
  • python下读取公私钥做加解密实例详解
  • unity3d制作ui
  • macos moja
  • js浏览器运行机制
  • unity官方插件
  • jquery 3d旋转
  • adb查看ip地址
  • 一个简单的javaweb项目
  • 松原江北小吃一条街
  • 重庆国税电子税务局
  • 新疆塔城靠近俄罗斯吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设