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>

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