Vue组件的封装与调用

最新推荐文章于 2023-05-18 18:11:54 发布
最新推荐文章于 2023-05-18 18:11:54 发布
阅读量979 收藏 2
点赞数
分类专栏： vue 文章标签： 子组件与父组件通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miao_yf/article/details/100929810
版权
本文通过一个分页组件实例，讲解Vue中子组件的创建和父组件如何传递数据。子组件通过props接收父组件的totalCount和input值，用watch监听input变化。同时介绍$emit用于子组件触发父组件方法，实现双向通信。
摘要由CSDN通过智能技术生成

我以一个分页组件来分析

首先，新建了一个page.vue的文件，作为子组件，按照需要将标签样式等写好，我的路径是src/components/page.vue

子组件中设置props，用来接收父组件传递的值，这里我设置了两个值，一个totalCount用来接收总页数，一个input用来接收当前页码

props:['totalCount','input'],

父组件传递过来的totalCount 的值，在子组件中不需要处理，所以可以在子组件中直接调用

<span style="margin-left:10px;">共 {
  {totalCount}} 页</span>

 input值需要在子组件中稍作处理，所以需要在子组件中声明一个变量来接收，用watch函数来监听父组件传来的input值，在子组件中操作声明的变量，这么做的原因呢，可以看一下Vue官方文档的prop

最低0.47元/天 解锁文章
仗剑东游的猫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue实现两个数相加的计算
weixin_44289604的博客
06-27 1万+
输入数字，点击计算可以实现两个数相加，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!-..
Vue获取元素或组件内容$refs
weixin_42274805的博客
03-22 3258
Jquery中我们可以通过$('.className')或者$('#ID')来获取元素的值或者内容，而在Vue中我们可以通过this.$refs来获取标签元素的内容或值。 $("#id").text('xxx') // 使用Jquery document.getElementById("id") // 使用原生Dom <template> <p ref="textElement">1111</p> </template> <scri
vue2和vue3中 封装组件 通过函数调用
qq_38758763的博客
07-27 1524
vue2和vue3中封装组件通过函数调用。
vue封装取值
m0_50884068的博客
05-28 165
// potting.js export const potting=(val)=>{ return new Promise((resolve,reject)=>{ val=132 resolve(val) }) } // 使用 import {potting} from "@/utils/potting"; data(){ return { imm:'' } }, methods:{ btn(){
Vue 组件封装、组件传值、数据修改
DyP__CSDN的博客
09-07 2706
Vue 组件封装 封装的意义 当一个页面元素过多或者一个组件在多个页面都会被使用，就可以进行组件封装，可以对单个页面解耦，增加代码的可读性，并且多次使用的组件方便修改，只用修改一个地方就能对用到这个组件的所有地方进行修改。 方法 建立一个新的vue文件，在template中写好自己的组件，如图 然后在需要引用这个组件的页面进行引用 这样就简单实现了组件的封装，效果如图 组件传值 如上的例子，封装的组件需要图标、名字、描述等值，这些值需要在引用的页面传入封装组件。 首先在export default里面
Vue通用组件封装方式
ffjjssll的博客
04-20 641
Vue通用组件封装方式HOC高阶函数组件封装示例一:使用函数式组件方式示例二：基于模版的函数式组件 vue项目中通常会使用elementUI作为UI组件库，在研读了一些elementUI的源码后，大受启发，所以在此基础上记录一下几种组件封装的方式。 HOC高阶函数组件封装 不知道你有没有意识到，在一个项目中使用组件库时，某些组件需要固定的样式，以保持风格统一。这就有个问题，我们每次都要传递相同的props或者改写样式，而且一不小心就遗漏了边边角角。这时，基于框架库的二次封装就有了用武之地。二次封装最好保持原
vue之封装多个组件调用同一接口的案例
11-19
背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success...
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
使用VUE自定义组件封装数据字典实战
03-07
我们的目标是传入一个数据字典的类型编码，组件内部调用后端API，完成数据的加载与存储，在选择项变化时，自动更新绑定的对应的业务实体的属性值。同时，在业务实体的编辑页面，也能自动绑定和显示已选择的字典项。
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
vue组件的封装与使用
qq_38886284的博客
03-29 1150
组件是可复用的 Vue 实例，且带有一个名字。组件的封装和复用可以使我们在开发中极大的提高效率，使代码更加简洁，方便维护。1、在项目中通常把组件放在component文件夹中， 首先在component文件夹中新建一个vue页面，对用于整个项目组件的复用率不是很高的时候， 我们一般采用按需引用的放在，在要用到的页面引用组件。组件基础的使用就这些啦，下篇介绍父子组件之间的传值及函数调用....2、在要用组件的vue页面中进行组件的引用和注册。3、在vue页面中使用组件。
Vue组件的封装与引用
qq_46100001的博客
04-19 586
封装 Vue 组件并引用其实很简单，可以按照以下步骤进行：在 Vue 项目中的 src/components 目录下创建你的组件文件夹，并在其中创建一个 .vue 文件。在这个 .vue 文件中编写你的组件逻辑和模板代码。确保将组件内部需要暴露出来的数据使用 props 属性传递给父组件。导出该组件，可以使用 export default 或者 export 关键字导出组件对象。在需要使用该组件的父组件中，通过 import 引入组件，然后将该组件作为子组件使用。
vue获取使用封装的函数返回值
yangwq的博客
02-07 6924
cesium/src/Utils/cesium.js var basicAttr = { /** * 将实体从兵力组织拖拽至地图控件，落点 * @pick1 pick2：落点坐标 */ screenToworld(_this,pick1,pick2){ // 屏幕坐标转世界坐标 var pick= new Cesium....
vue封装组件以及调用
九亿宅男的梦的博客
10-14 1271
1. index.js export { default as addDialog } from './addDialog' export { default as EditDialog } from './EditDialog' editDialog.vue <template> <div><el-dialog title="编辑" :visible.sync="dialogVisible" width="40%"
vue组件的使用和封装
qq_53489791的博客
06-23 1484
vue组件使用和封装
vue组件 - 封装使用
d_rui的博客
05-06 1445
1. 什么是组件化开发 一个页面 可能有一个或多个组件 组成完整的页面功能 * 封装思想: 把页面上 可重用的部分 封装为 组件 , 从而方便项目的开发和维护 2. 封装和使用 第一步 : 定义组件 例如: 定义一个名为MyCom的组件,并在App.vue中使用 (结构如下) 第二步 : 在 App.vue中 引入 、注册 并 使用组件 注意: 组件名不能与现有的html标签名一致 3. 用scoped实现组件的私有样式 (1) 问题: 默认组件...
Vue如何封装组件
m0_57263959的博客
05-18 5781
通过修改父组件传递给子组件的属性，你可以改变子组件的行为或外观，而无需修改子组件本身。在组件对象中，定义组件的属性（props），数据（data），方法（methods），生命周期钩子（lifecycle hooks）等。你可以根据自己的需求，自定义组件的属性和方法，并在模板中使用插槽（slot）来插入内容。单向数据流：Vue 推崇单向数据流的概念，即数据从父组件流向子组件，而不允许子组件直接修改父组件的数据。，你可以实现组件之间的数据通信和参数传递，增强了组件的可组合性和可复用性。
vue2组件封装，调用父组件方法并传递参数
最新发布
11-17
在Vue2中，可以通过props和$emit来实现子组件向父组件传递参数和调用父组件的方法。具体实现步骤如下： 1.在子组件中，通过props接收父组件传递的方法和参数： ```vue <template> <div> <button @click="childMethod">点击按钮</button> </div> </template> <script> export default { props: { method: { type: Function, default: null }, param: { type: String, default: '' } }, methods: { childMethod() { this.method(this.param); } } }; </script> ``` 2.在父组件中，通过$emit触发子组件的方法，并传递参数： ```vue <template> <div> <child :method="method" :param="param"></child> </div> </template> <script> import child from './components/childCompoent'; export default { components: { child }, data() { return { param: 'hello world' }; }, methods: { method(param) { console.log('父组件方法', param); } } }; </script> ``` 在上述代码中，父组件通过:method和:param将方法和参数传递给子组件。子组件通过this.method(this.param)调用父组件的方法，并将参数传递给父组件。父组件通过console.log输出方法和参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值