通常情况下子组件是不能直接访问父组件或者Vue实例中的数据的,但是在开发中,往往有一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多数据,其中一部分数据并非使我们整个大页面组件来展示的,而是需要下面的子组件进行展示,这个时候并不会让子组件再次发送一次网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)
官方给出的方法
父组件通过props给子组件传递数据
<子组件标签 :子组件的props属性 = "父组件的data变量" /> </子组件标签>
子组件通过自定义事件给父组件发送消息
真实开发中 ,Vue实例和子组件的通信 与 父组件和子组件的通信过程是一样的vue实例本身可以看做父组件
子组件中props的数据验证
在子组件中 props可以是数组,也可以是对象,当需要对props进行类型验证时,就需要使用对象语法了,对象的好处的是可以指定必须传过来的数据类型,在开发中很少用数组的写法
//props: [‘cmovies‘, ‘cmessage‘],
props:{
//1.类型限制
// cmovies:Array,
// cmessage:String,
//2.提供默认值 以及必传值
cmovies:{
type:Array,
default(){
return []
}
},
cmessage:{
type:String,
default:"xiaosaobi",
required:true
}
},
原文:https://blog.51cto.com/13550695/2461090