vue warning如何去掉_详解 vue 组件三大核心概念

前言

本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。

ffb08abf18d9df6fe510928826b4c290.png

本文的代码请猛戳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中声明,就会默认挂在子组件的根元素上,如下图所示:

21691894489bf2eae4f816a421516624.png

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框

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/475295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

碰撞代码

碰撞代码:if(CGRectContainsPoint(sprite.boundingBoy, touchLocation)){[self checkTheSprites:sprite]} 转载于:https://www.cnblogs.com/ligun123/archive/2012/02/08/2343035.html

LeetCode 1133. 最大唯一数

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 A,请找出并返回在该数组中仅出现一次的最大整数。 如果不存在这个只出现一次的整数,则返回 -1。 示例 1: 输入:[5,7,3,9,4,9,8,3,1] 输出:8 解释: 数组…

firewall mysql端口_Centos7 firewall开放3306端口

Centos7 firewall开放3306端口在 Centos 7 中防火墙由 firewalld 来管理,而不是 iptables。1. 查看防火墙状态firewall-cmd --state ## 结果显示为running或not running2. 关闭防火墙firewallsystemctl stop firewalld.servicesystemctl disable firewalld.service3…

技术演讲的技巧和经验

导读:如果你在编程大会上发表演讲,不论是开放式的BarCamp或是像OSCON那样精心组织的大型会议,你只有很短的一段时间将脑中的信息传达给听众,所以请仔细把握。 技术会议的成本非常昂贵,不仅仅是经济上的成本。即使像Bar…

如何使用kali来进行一次ddos攻击

本文章用于记录自己的学习路线,不用于其他任何途径! ! ! 哈喽啊!又是好久不见,本博主在之前发过一个ddos攻击的介绍。 emm…虽然那篇文章也提到了ddos攻击的方式,但太过于简陋,好像也没有什么用,so&#…

LeetCode 256. 粉刷房子(DP)

文章目录1. 题目2. 解题1. 题目 假如有一排房子,共 n 个,每个房子可以被粉刷成红色、蓝色或者绿色这三种颜色中的一种,你需要粉刷所有的房子并且使其与相邻的两个房子颜色不能相同。 当然,因为市场上不同颜色油漆的价格不同&…

flare3d_clone

flare3d_clone (1)克隆 model.clone() var clone:Mesh3D pivot3D.clone() as Mesh3D;clone.addEventListener( MouseEvent3D.MOUSE_OVER, mouseOverEvent ); //鼠标放在上面clone.addEventListener( MouseEvent3D.MOUSE_OUT, mouseOutEvent );    //鼠标移开clone.addE…

LeetCode 1099. 小于 K 的两数之和(二分查找)

文章目录1. 题目2. 解题2.1 暴力2.2 二分查找1. 题目 给你一个整数数组 A 和一个整数 K,请在该数组中找出两个元素,使它们的和小于 K 但尽可能地接近 K,返回这两个元素的和。 如不存在这样的两个元素,请返回 -1。 示例 1&#…

sonarqube使用mysql_SonarQube的安装、配置与使用

SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误,下面将会介绍一下这个工具的安装、配置以及使用。准备工作;1、jdk(不再介绍)2、sonarqube:http://www.sonarqube.org/downloads/3、SonarQubeScan…

windows phone7 学习笔记14——地理位置服务与反应性扩展框架

使用Location Service能帮助开发者为windows Phone 开发具备位置感知(Location-Aware)功能的应用程序。比如很多导航的软件,查找附近吃饭、娱乐甚至厕所的应用程序,都是基于这个服务的。 我们有3种方法来获取设备的位置。GPS,移动…

LeetCode 1228. 等差数列中缺失的数字

文章目录1. 题目2. 解题1. 题目 有一个数组&#xff0c;其中的值符合等差数列的数值规律&#xff0c;也就是说&#xff1a; 在 0 < i < arr.length - 1 的前提下&#xff0c;arr[i1] - arr[i] 的值都相等。 我们会从该数组中删除一个 既不是第一个 也 不是最后一个的值…

离散系数的计算公式_如何求不同变量之间的离散程度

变异系数前面介绍的极差、方差和标准差都是反映一组数值变异程度的绝对值&#xff0c;其数值的大小&#xff0c;不仅取决于数值的变异程度&#xff0c;而且还与变量值水平的高低、计量单位的不同有关。所以&#xff0c;不宜直接利用上述变异指标对不同水平、不同计量单位的现象…

sql server 海量数据速度提升:SQL优化-索引(9) 【转】

8、union并不绝对比or的执行效率高 我们前面已经谈到了在where子句中使用or会引起全表扫描&#xff0c;一般的&#xff0c;我所见过的资料都是推荐这里用union来代替or。事实证明&#xff0c;这种说法对于大部分都是适用的。 select gid,fariqi,neibuyonghu,reader,title from …

LeetCode 252. 会议室(排序)

文章目录1. 题目2. 解题1. 题目 给定一个会议时间安排的数组&#xff0c;每个会议时间都会包括开始和结束的时间 [[s1,e1],[s2,e2],...] (si < ei)&#xff0c;请你判断一个人是否能够参加这里面的全部会议。 示例 1: 输入: [[0,30],[5,10],[15,20]] 输出: false示例 2: 输…

jedis连接mysql_使用Jedis操作Redis数据库

Redis不仅是使用命令来操作&#xff0c;现在基本上主流的语言都有客户端支持&#xff0c;比如java、C、C#、C、php、Node.js、Go等。 在官方网站里列一些Java的客户端&#xff0c;有Jedis、Redisson、Jredis、JDBC-Redis、等其中官方推荐使用Jedis和Redisson。 在企业中用的最多…

LeetCode 1243. 数组变换

文章目录1. 题目2. 解题1. 题目 首先&#xff0c;给你一个初始数组 arr。然后&#xff0c;每天你都要根据前一天的数组生成一个新的数组。 第 i 天所生成的数组&#xff0c;是由你对第 i-1 天的数组进行如下操作所得的&#xff1a; 假如一个元素小于它的左右邻居&#xff0c…

mysql5.7.17二进制包_mysql5.7二进制包安装方法

1.部署tar xf mysql-5.7.17-linux-glibc2.5-x86_64.tar.gzmv mysql-5.7.17-linux-glibc2.5-x86_64 /application/mysql-5.7.17ln -s /application/mysql-5.7.17 /application/mysql2.授权chown -R mysql.mysql /application/mysql-5.7.173.初始化/application/mysql-5.7.17/bin…

火狐字体加粗

-moz-box-shadow: 0 0 4px rgba(80,160,0,.05);转载于:https://www.cnblogs.com/sususu/archive/2012/02/28/2371532.html

LeetCode 1065. 字符串的索引对

文章目录1. 题目2. 解题1. 题目 给出 字符串 text 和 字符串列表 words, 返回所有的索引对 [i, j] 使得在索引对范围内的子字符串 text[i]…text[j]&#xff08;包括 i 和 j&#xff09;属于字符串列表 words。 示例 1: 输入: text "thestoryofleetcodeandme", wo…

mysql中用完即删用什么_MySQL使用和操作总结(《MySQL必知必会》读书笔记)

简介MySQL是一种DBMS&#xff0c;即它是一种数据库软件。DBMS可分为两类&#xff1a;一类是基于共享文件系统的DBMS&#xff0c;另一类是基于客户机——服务器的DBMS。前者用于桌面用途&#xff0c;通常不用于高端或更关键应用。MySQL是基于客户机——服务器的数据库。客户机—…