vue——props的两种常用方法

1、实现父——>子的通信

举例如下：

父组件 parent.vue


<children :channel="object1"></children>

子组件 children.vue

export default{name:"children",props:["channel"],data(){return{newChannel:null}}methods:{func1(){this.newChannel = this.channel;}}}

父组件object1的值放在channel变量，然后传入给子组件。这样可以达到父子之间的通信

2、校验变量

还可以通过组件传入的值判断是否符合要求，如果不符合发出警告，例如：


props:{blackFlag:{type:Boolean,default:false},options:{type:object},propsA:{validator(value){return value > 10} ,default:11}
}

type 就是校验的要求，可以是如下类型：

string
number
function
boolean
object
array
symbol

(校验变量的以上内容来自官方文档)

举个项目中用到的例子：
通过一个变量来控制一个组件的黑白皮肤显示，当变量存在时组件显示黑皮肤，不存在则默认白皮肤


props:{
blackFlag:{
type:Boolean,
default:false
}
},
methods:{
func1(){
if(this.blackFlag){
//黑皮肤 do
}else{
//白皮肤 do
}
}
}


<Loading blackFlag></Loading>

转载于:https://www.cnblogs.com/liaoanran/p/8038869.html

vue——props的两种常用方法相关推荐

python timer使用-Python timer定时器两种常用方法解析
这篇文章主要介绍了Python timer定时器两种常用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下方法一,使用线程中现成的: 这种一般 ...
python定时器的使用方法_Python timer定时器两种常用方法解析
这篇文章主要介绍了Python timer定时器两种常用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下方法一,使用线程中现成的: 这种一般 ...
vue的axios两种写法（不知道对不对，仅供参考）
vue的axios两种写法(不知道对不对,仅供参考) `methods () { getHomeInfo () { axios.get ('/api/index.json') ...
win10 格式化 linux u盘,Win10怎么格式化u盘 Win10中对U盘格式化的两种常用方法
如果你的 U 盘故障或损坏,将其格式化也许能够恢复正常工作.如果你的大空间 U 盘里面有太多小文件,格式化也是将其内容清空的最佳办法,本文我们就来详细介绍 Windows 10 中对 U 盘进行格式化 ...
运用Python爬取二手房价格与信息的两种常用方法
最近房地产市场进一步收紧,多地地方政府出台各种收紧政策,以保证房地产健康发展,因此云朵君就想到运用Python网络爬虫,抓取部分房产信息,了解下最近房地产的情况. 接下来以房天下二手房信息,以获取某个 ...
vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
创建Vue项目的两种方法(镜像和官网)
两种搭建方法: 安装node:brew install node 查看node版本:node -v 安装npm:brew install npm 查看npm版本:npm -v 使用淘宝镜像使用官网办 ...
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
【PHP-网页内容抓取】抓取网页内容的两种常用方法
说到网页内容的抓取,最常用的两种方式: 1.利用file_get_contents()函数,简简单单: 2.CURL抓取工具.CURL是一个非常强大的开源库,支持很多协议,包括HTTP.FTP.TEL ...

vue——props的两种常用方法

vue——props的两种常用方法

vue——props的两种常用方法相关推荐

最新文章

热门文章