父子组件通信
有可能在一个页面中,我们从服务器请求到了很多数据,其中一部分的数据并非是在我们的大组件中展示的,而是需要在其子组件进行展示。但是子组件并不会再次发送一个网络请求(发送请求对服务器压力大),而是直接将父组件中的数据传递给子组件
注意:在开发中,Vue实例和子组件的通信和父组件与子组件的通信过程是一样的,所以以下示例通过Vue实例和子组件的通信来解释说明
父子组件通信—父传子
通过 props(properties)向子组件传递数据,使用props来声明需要从父组件那里接收的数据,这里介绍两种方式
第一种方式------字符串数组
第一种方式是使用字符串数组,数组中的字符串就是传递时的名称(子组件中的变量名)
注意:
(1)一定要使用v-bind绑定父组件中的变量
(2)不使用v-bind,会将message、books当作一个字符串
(3)具体步骤看注释
<body>
<div id="app">
<cpn book="books" cmessage="message"></cpn>
//父传子
<cpn :book="books" :cmessage="message"></cpn>
</div>
//模板
<template id="cpn">
<div>
<ul>
<li v-for="item in book">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="../vue.js"></script>
<script>
const cpn = {
template:"#cpn",
//使用字符串数组
props:["cmessage","book"]
}
//父组件
const app = new Vue({
el:'#app',
data:{
message:"hello vue",
books:["红楼梦","水浒传","三国演义","西游记"]
},
//子组件
components:{
cpn
}
})
</script>
</body>
第二种方式------对象
第一种方式是使用对象,对象可以设置传递时的类型,也可以设置默认值,还有是否必传等。
注意:
(1)提供默认值只有在组件中没有使用v-bind绑定父组件中的值时,显示默认值
(2) 高版本Vue中类型是对象或函数时,默认值必须是一个函数
(3)require为true时,父组件必须向子组件传值(使用v-bind),否则报错
类型限制
const cpn = {
template:"#cpn",
props: {
//单个类型限制
cmessage:String,
//多个类型限制
book:[Number,String]
}
}
提供默认值
使用default,当没有使用v-bind绑定父组件中的值时,显示默认值
const cpn = {
template:"#cpn",
props: {
book:{
type: Array,
//高版本Vue
default(){
return []
}
cmessage:{
type: String,
//默认值是父组件没有向子组件传值才会显示
default:"hello",
}
}
是否必传
使用require(布尔型),为true表示父组件必须向子组件传的值,若没有传,则会报错
const cpn = {
template:"#cpn",
props: {
book:Array,
cmessage:{
type: String,
//布尔值,父组件必须向子组件传的值,否则报错
require:true
}
}