vue——props的两种常用方法

Posted 2020-10-17 liaoanran

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>