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>