vue warning如何去掉_详解 vue 组件三大核心概念
前言
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。
本文的代码请猛戳https://github.com/ljianshu/Blog,纸上得来终觉浅,大家动手多敲敲代码!
一、属性
1.自定义属性props
prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多人却忽视,直接使用 props 的数组用法,这样的组件往往是不严谨的。
// 父组件 // 子组件 props: { name: String, type: { //从父级传入的 type,它的值必须是指定的 'success', 'warning', 'danger'中的一个,如果传入这三个以外的值,都会抛出一条警告 validator: (value) => { return ['success', 'warning', 'danger'].includes(value) } }, onChange: { //对于接收的数据,可以是各种数据类型,同样也可以传递一个函数 type: Function, default: () => { } }, isVisible: { type: Boolean, default: false }, list: { type: Array, // 对象或数组默认值必须从一个工厂函数获取 default: () => [] } }
从上面的例中,可以得出props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以传递一个函数。
2.inheritAttrs
这是2.4.0 新增的一个API,默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。可通过设置 inheritAttrs 为 false,这些默认行为将会被去掉。注意:这个选项不影响 class 和 style 绑定。 上个例中,title属性没有在子组件中props中声明,就会默认挂在子组件的根元素上,如下图所示:
3. data与props区别
- 相同点
两者选项里都可以存放各种类型的数据,当行为操作改变时,所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。
- 不同点
data 被称之为动态数据,在各自实例中,在任何情况下,我们都可以随意改变它的数据类型和数据结构,不会被任何环境所影响。
props 被称之为静态数据,在各自实例中,一旦在初始化被定义好类型时,基于 Vue 是单向数据流,在数据传递时始终不能改变它的数据类型,而且不允许在子组件中直接操作 传递过来的props数据,而是需要通过别的手段,改变传递源中的数据。至于如何改变,我们接下去详细介绍:
4.单向数据流
这个概念出现在组件通信。props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的,不允许直接操作改变各自实例中的props数据,而是需要通过别的手段,改变传递源中的数据。那如果有时候我们想修改传递过来的prop,有哪些办法呢?
- 方法1:过渡到 data 选项中
在子组件的 data 中拷贝一份 prop,data 是可以修改的
export default { props: { type: String }, data () { return { currentType: this.type } }}
在 data 选项里通过 currentType接收 props中type数据,相当于对 currentType= type进行一个赋值操作,不仅拿到了 currentType的数据,而且也可以改变 currentType数据。
- 方法2:利用计算属性
export default { props: { type: String }, computed: { normalizedType: function () { return this.type.toUpperCase(); } }}
以上两种方法虽可以在子组件间接修改props的值,但如果子组件想修改数据并且同步更新到父组件,却无济于事。在一些情况下,我们可能会需要对一个 prop 进行『双向绑定』,此时就推荐以下这两种方法:
- 方法3:使用.sync
// 父组件
父组件msg:{{ msg }}
父组件数组:{{ arr }}
打开model框
vue warning如何去掉_详解 vue 组件三大核心概念相关推荐
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件 选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
- dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
- vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传
详解Vue.js调用手机相机和相册以及上传 发布于 2020-7-7| 复制链接 摘记: 组件 ```xhtml .. 组件 ```xhtml --> 选中{{imgList.length}}张 ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
- vue传递数组对象_详解vue组件三大核心概念
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
- vue 变量定义 对象_详解Vue 全局变量,局部变量
局组件和局部组件 1.先定义组件 Vue.component('组件名', { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小 ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
- oclick vue 传参 函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货 作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
最新文章
- easyexcel怎么设置表头宽度_easyexcel 自动设置列宽
- Amqp整合com.rabbitmq.client.ShutdownSignalException: channel error; protocol method异常处理
- 简单的小程序实现ATM机操作
- 数据库设计的 10 个最佳实践
- CC++——库头文件及其作用
- android 渠道方案,Android多渠道打包时获取当前渠道的方法
- java选择排序算法实现
- C# 程序Hello World
- 谷歌chrome浏览器提示“喔唷 崩溃啦”的解决方案
- SSH登录到远程linux机器并执行命令
- Sketch for Mac(矢量绘图工具)
- 冠军方案解读 | nnUNet改进提升笔记
- 关于眼镜的一些知识收集
- 马云:阿里巴巴的最高机密是我们的组织架构图
- 我精心整理的一些大牌男装正品店
- 1-1 medium vs. modality笔记
- 电厂脱硫吸收塔消泡剂降低石灰石的用量,效果杠杠的
- 【计算机科学】【2019.09】全基因组关联研究的深度学习和SNP位置影响
- Python爬虫项目实例——爬取【乐彩网】双色球历史获奖红蓝球数据
- ipmitool 实时检测温度的脚本编写