目录

  • 1 组件封装
    • 1.1 全局注册
    • 1.2 局部注册
      • 1.2.1 命名
      • 1.2.2 引用组件
        • 1.2.2.1 传统写法
        • 1.2.2.2 setup
        • 1.2.2.3 easycom
    • 1.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-model

1 组件封装

vue 官网 组件基础

  • 需要封装的情况

    • 组件复用
    • 模块化
  • 另: 修改子组件时，有时需重新运行才有效果

1.1 全局注册

<fzzz></fzzz>;import yyy from "./components/xxx.vue";
Vue.component("zzz", yyy);
  • yyy 不能有 -
  • fzzz 只与 zzz 有关
// main.js
import 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.js
import 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 引用组件

uniapp 官网 引用组件

1.2.2.1 传统写法

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

1.2.2.2 setup

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

1.2.2.3 easycom

  • child.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>// props
props: {name: {type: String,default: ''},
},

// 父组件
<child name="xxx"></child>

1.3.3 子组件不能直接修改 prop 中的值

// 子组件
<view @click="getValue">{{ name }}</view>// props
props: {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()、methods
data() {return {name: 'xxx'}
},
methods: {getValue() {this.$emit('change', this.name)}
}

// 父组件
<child @change="getName"></child>// methods
methods: {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>// methods
methods: {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 时，将变量值传给子组件的 nameevent: "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>

【Vue】 组件封装相关推荐

  1. Vue 组件封装之 ScrollView 上拉加载更多

    Vue 组件封装之 ScrollView 上拉加载更多 一.ScrollView 上拉加载更多 二.使用案例 三.API 使用指南 四.源代码 一.ScrollView 上拉加载更多 组件说明: 实现 ...

  2. Vue 组件封装之 Questionnaire 问卷调查

    Vue 组件封装之 Questionnaire 问卷调查 前言 一.Questionnaire 组件 二.使用案例 三.API 使用指南 四.源代码 前言 问卷调查表也是目前前端比较常见的开发项目,目 ...

  3. Vue 组件封装之 Content 列表(处理多行输入框 textarea)

    Vue 组件封装之 Content 列表 一.Content 列表 二.使用案例 三.API 使用指南 四.源代码 一.Content 列表 组件说明: 实现 Content 列表布局排版. 效果展示 ...

  4. Vue 组件封装之 List 列表

    Vue 组件封装之 List 列表 一.List 列表 二.使用案例 三.API 使用指南 四.源代码 一.List 列表 组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...

  5. Vue 组件封装之 Search 搜索

    Vue 组件封装之 Search 搜索 一.Search 组件 二.使用案例 三.API 使用指南 四.源代码 一.Search 组件 组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...

  6. Vue组件封装，（面试回答）

    在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...

  7. Vue 组件封装之 Tab 切换

    Vue 组件封装之 tab 切换 一.Tab 切换组件 二.使用案例 三.API 使用指南 四.源代码 五.总结 一.Tab 切换组件 组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...

  8. Vue组件封装的过程

    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...

  9. Vue 组件封装、组件传值、数据修改

    Vue 组件封装 封装的意义 当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...

  10. Vue 组件封装之 Carousel 轮播图

    Vue 组件封装之 Carousel 轮播图 一.Carousel 轮播图组件 二.使用案例 三.API 使用指南 四.源代码 一.Carousel 轮播图组件 组件说明: 实现无缝轮播. 效果展示: ...

最新文章

  1. NumberOf1Bits(leetcode191)
  2. 洛谷 P3372 【模板】线段树 1
  3. 视频教程-WebService实战讲解课程-Java
  4. 西门子Step7和TIA软件“交叉引用”的使用
  5. 生成对抗网络（GAN）教程 - 多图详解
  6. lzg_ad: FBWF技术概述
  7. Android Manifest配置文件中use-permission相关内容列表
  8. Java 进阶 hello world! - 中级程序员之路
  9. 手机号微信号绑定微信号_相关计算机,新手机号被绑定过微信号怎么办？这是个“二次”放号的号码...
  10. JavaScript 导出 table 为 Excel 表格
  11. AndroidManifest--详细理解
  12. MySQL无法连接/端口被占用［解决记录］
  13. singleton模式 C++
  14. uc游览器 android系统,手机UC浏览器2019最新版
  15. 企业业务中台应用架构和技术架构
  16. android 设置字体为幼圆_怎么设置电脑字体为幼圆 电脑字体幼圆怎么设置
  17. 特网云服务器 WindowsServer2012 关闭IE增强机制
  18. Linux--增加用户、添加用户组
  19. Java编程工具哪种好？
  20. 如何解决 fs.renameSync() 跨区移动文件的问题

热门文章

  1. 64位应用程序的开发
  2. visio与word
  3. 入门Java系列(一)——入门与学习方式
  4. （私人收藏）蓝色抽象科技感工作计划PPT模板
  5. CSS基础之媒体类型（@media）样式
  6. 高精度电子罗盘精确导航中的应用
  7. 爬取百度贴吧的标题,发帖人,发帖时间
  8. c语言中五子棋怎么计时,五子棋如何计时
  9. java word文档生成_java生成word文档
  10. jquery ajax post请求下载文件