zoukankan      html  css  js  c++  java
  • vue——props的两种常用方法

    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 就是校验的要求,可以是如下类型:

    1. string
    2. number
    3. function
    4. boolean
    5. object
    6. array
    7. symbol

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

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

    
    props:{
            blackFlag:{
    	    type:Boolean,
    	    default:false
            }
    },
    methods:{
            func1(){
    	    if(this.blackFlag){
    		    //黑皮肤 do
    	    }else{
    		    //白皮肤 do
    	    }
            }
    }
    
    
    
    <Loading blackFlag></Loading>
    
    
  • 相关阅读:
    【原创】FltGetFileNameInformation蓝屏分析
    【原创】调用系统函数里面蓝屏例子
    【原创】FltSendMessage蓝屏分析
    RES协议和断网访问URL出现的错误页面
    绕过本机DNS缓存
    异步机制
    异步机制
    异步机制
    异步机制
    异步机制
  • 原文地址:https://www.cnblogs.com/liaoanran/p/8038869.html
Copyright © 2011-2022 走看看