首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue组件Prop命名约定

在编程,有两个极具挑战性任务:缓存失效和命名事物。今天,我们将深入探讨后者,探索为Vue组件命名props艺术。 在给 props 命名时,遵循已有的变量命名惯例是非常重要。...对于布尔,请使用描述性前缀如 is 、 can 和 has 来传达视觉或行为上变化: is 适用于表示视觉或行为状态,例如 isVisible , isEnabled 或 isActive 。...can 表示行为变化或条件性视觉变化。考虑使用 canToggle 或 canExpand 这样属性名称来清晰地表达组件能力。 has 表示UI元素存在。...如果这些 props 是用来传递给子组件,请使用描述组件本身名称。...按照这些准则,我们可以为Vue应用程序建立一致且有意义 prop 命名约定。周到 prop 名称有助于提高代码可读性和可维护性,使你和团队更容易有效地合作。

22730
您找到你想要的搜索结果了吗?
是的
没有找到

在 Vue ,子组件为何不可以修改父组件传递 Prop

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 更新会向下流动到子组件,但是反过来则不行。...这样会防止从子组件意外变更父级组件状态,从而导致你应用数据流向难以理解。 额外,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新。...这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器控制台中发出警告。 如果修改了,Vue 是如何监控到属性修改并给出警告。...需要特别注意是,当你从子组件修改prop属于基础类型时会触发提示。 这种情况下,你是无法修改父组件数据源, 因为基础类型赋值时是拷贝。...你直接将另一个非基础类型(Object, array)赋值到此key时也会触发提示(但实际上不会影响父组件数据源), 当你修改object属性时不会触发提示,并且会修改父组件数据源数据。

2.3K10

react组件,函数组件:父子组件、非父子组件

父子组件、非父子组件; 类组件 父子 组件 子 传 父: 子组件:事件触发 sendMsg=()=>{...: 父子组件 父传子: 1)在父组件找对子标签,在子组件标签上添加自定义属性,自定义属性名 = {要发送数据} 2)在子组件模板中使用props.自定义属性名可以获取父组件传递过来数据,同时在子组件函数接受一个参数 props function...} 子传父: 前提必须要有props,在函数组件行參位置,需要是子组件函数props 1)在子组件自定义一个数显进行数据发送,在需要出发dom元素上面绑定自定义事件...**自定义属性名a**={新方法}> (这个两个 **自定义属性名** 要一致) 3)父组件接收自定义参数,这个自定义参数就是子组件传递给父组件数据

6.1K20

vue组件间传

1.父子组件 (1) 父传子 父组件向子组件,可以通过绑定属性传;子组件通过props接收父组件。...,使用绑定属性方法,给子组件标签绑定属性, 然后在子组件页面中使用props和插表达式来接收数据。...(props数据不能修改,需要中转) 在子组件想要修改父组件传过来,此时如果自定义一个update函数,只能修改当前页面的数据, 此时,就需要使用$emit来触发一个自定义事件,格式如下,...此处引号updateData是自定义事件名称, 其次将当前页面中转props数据myName和myAge分别定义为n和a。...注意:后代组件通过inject注入祖级组件依赖数据,跟props一样,接收数据是只读,不能修改。

82540

vuejs组件以及父子组件间通信传

,height等),类型任何,可简写为冒号:,例如v-bind:href="";v-bind:class="",:title="",动态地绑定一个或多个特性,或一个组件 prop到表达式,绑定自定义属性...v-if:类型任何,根据表达式真假条件渲染元素,表达式为false是,该元素会从dom移除 官方解释:在切换时元素及它数据绑定 / 组件被销毁并重建。...,它是保存在父组件list数组,是直接挂载根实例下,通过按钮添加操作,将每次新添加渲染到指定页面位置当中去 父组件数据是无法直接在子组件中使用,所以在父组件引用组件,通过v-bind...其实这个content变量是一个prop, prop是你可以在组件上注册一些自定义特性。...当一个传递给一个 prop 特性时候,它就变成了那个组件实例一个属性,本质上这个prop类型是由父组件传过来决定,当然在写法上这个prop要注意大小写问题,具体可查看文档 在子组件模板中使用

20.4K10

vue组件向子组件

总体来说,父传子就是这四个步骤:父组件data定义,引入并调用子组件,在引用组件标签上通过v-bind指令给子组件,子组件通过在data定义props属性接收父组件传过来然后应用到子组件里...首先,肯定是定义在父组件,供所有子组件共享,所以要在父组件data定义: 然后,父组件要和子组件有契合点,就是要在父组件引入、注册、调用子组件: 引入: 注册...: 调用:(父组件内在引用组件标签上通过v-bind指令绑定上要传) 最后,子组件内部要去接收父组件传过来:使用props来接收 这样,子组件内部就可以直接使用父组件值了...引用类型:数组(Array)、对象(Object) 其中,普通类型是可以在子组件更改,不会影响其他兄弟子组件内同样调用来自父组件, 但是,引用类型,当在子组件修改后,父组件也会修改...,那么后果就是,其他同样引用了改组件内部也会跟着被修改。

1.4K40

vue组件给子组件,父组件改变,子组件不能重新渲染

1在子组件中用watch()监听改变,不同类型要用不同监听方法 props: { echartStyle: { type: Object, default() {...$refs.str.method()在改变地方来调用子组件方法 来 重新渲染(暂时使用有bug,不能够及时渲染,父组件已经改变了,但是子组件仍然没有改变,不能够及时渲染) 这个方法感觉props...’接收数据在调用方法之后,明明父组件已经改变了,但是父组件在调用子组件方法时,数据仍然没有 接收到,调用之后才接收到,这个方法暂且没用,应该是声明ref时候声明是当前组件实例,然后调用时调用也是未改变时属性...这个没什么用,可以用来调用子组件方法。...$refs.pieChart.getChange(); } }, 3 在子组件上使用 v-if =”flag” (谢谢各位老哥建议) 初始flag:true 修改data时 changData(

2.7K30

jqueryattr()和prop()区别

在jQuery,attr()函数和prop()函数都用于设置或获取指定属性,它们参数和用法也几乎完全相同。 但不得不说是,这两个函数用处却并不相同。下面我们来详细介绍这两个函数之间区别。...: 18}; 7 在jQueryprop()函数设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上属性(property);attr()函数设计目标是用于设置或获取指定...prop()函数操作是JS对象属性,因此设置属性可以为包括数组和对象在内任意类型。...并且,在某些版本,这些属性表示文档加载时初始状态,即使之后更改了这些元素选中(或禁用)状态,对应属性也不会发生改变。...因此,在jQuery 1.6及以后版本,请使用prop()函数来设置或获取checked、selected、disabled等属性。

1.9K20

vue子组件给父组件_子组件调用父组件方法

,触发:事件绑定机制绑定函数,通过参数方式将要传传过来,父组件处理,也就接到了子组件 最开始父组件本身有一个方法 : fatherMethods fatherMethods(){...console.log('父组件方法') } 步骤①:在子组件被调用标签,绑定一个父组件方法引用 父组件通过事件绑定机制,也就是 @sendSon="fatherMethods" 方式传给子组件..., 注意,这里是方法引用,换句话就是把这个方法传递给子组件,而不是方法执行完以后,所以这里不能加括号 目的:把父组件一个方法传给子组件 步骤② 给子组件写一个引发事件 子组件写一个事件会触发一个子组件本身方法...$emit('sendSon') } 步骤④ 子组件在调用父组件时,传参数 真正组件并没有调用这个show方法,只有传给组件调用了,调用就可以传参数,那么就在子组件触发时候传参数...步骤⑤ 在调用时候传参数 $emit在触发父组件传过来时候,第一个参数是方法名,从第二个起,后面均可以传参数, show方法里面可以写是对参数一系列操作,也就变相完成了从子组件向父组件需求

4.1K20

Vue组件以及子组件问题

大家好,又见面了,我是你们朋友全栈君。 前言:在一些页面不单单纯纯一个vue文件,vue讲究组件化开发,但是一般肯定会产生交互事件,今天了解了这个传,特此来记录一下。...---- 目录 一.父组件向子组件 二.子组件向父组件 一.父组件向子组件组件向子组件会用到:Prop,一般我们需要在子组件中进行相关声明,如下所示: 子组件为HellowWorld.vue...App.vue <!...,例如: 二.子组件向父组件 在子组件时会用到$emit,值得注意是:在子组件时候方法要与父组件监听方法名称相同,也就是示例 listenToChild Helloworld.vue...count:0, options:[], // 子组件传来参数 data:[] } }, methods:{ Add(){ this.count=Number(this.count

86620

vue父子组件通过ref传「dialog组件

项目中经常用到elementdialog组件,现记录父子组件通过ref传。 操作流程: 1.父组件中点击按钮吊起子组件模态框dialog进行内容设置,并给子组件传递id this....$refs.dialogRef.init(this.fatherId); //获取子组件init方法并将父组件id传递给子组件 }); 2.在子组件需接收父组件传来内容id并查询内容详情...init (val) { this.activityId = val //接收父组件传递id } 3.在子组件dialog可以编辑内容,然后将数据通过$emit传递给父组件 this...ref传,然后在子组件data函数直接return获得 父组件:可以通过ref向子组件 this....$refs.dialogRef.name2=this.fatherName2 子组件:可以通过数组形式向父组件传递多个参数 this.

2.4K20

vue-cli工程 组件注册 ,父组件向子组件

-- 向子组件 需要在父组件中使用v-bind绑定一个名字 :outdata="arr" 其中outdata这个名字是         你子组件props属性接收数据时名字 -->    ...{       arr:[1,2,3,4,5] //父组件数据     }   } }     1     2     3     4     5     6...    export default {         // 第一种写法:不推荐         // props:['outdata'],         // 第二种写法 推荐 需要注意传...和传引用default 写法区别         // js object 和 Array 属于传引用 ,default 需要返回一个工厂函数写法         // 传:Number ...String Boolean 类型 default: 0||''||false 写法         // 当props数据类型验证失败时,在开发版本下 在控制台会报警告         props

67530
领券