码迷,mamicode.com
首页 > 其他好文 > 详细

父子组件之间的通信

时间:2019-11-22 23:31:38      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:oct   v-for   mes   pre   meta   template   pass   charset   通过   

首先,组件需要向服务器请求数据,服务器将数据传递给外层最大的父级组件,因此父级组件需要将得到的值传递给下面的小组件,因此引入了父子间通信

子组件不能引用父组件或者Vue实例的数据的;在开发中,往往需要将一些数据从上层传递给下层;

进行父子组件之间信息传递(互传)的方式:1通过props向子组件传递信息2通过事件向父组件发送消息;

父组件--(pass props)----》子组件 -------($emit Events)------》父组件

 

props   基本语法:

父组件--(pass props)----》子组件 

使用选项props来声明需要从父级接收的数据。

props的值有两种方式:

方式一:字符串数组,数组中的字符串就是传递时的名称。

方式二:对象,对象可以设置传递时的类型,也可以设置默认值等;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<!-- 只有使用了v-bind才会识别为变量-->
<cpn :cmovies="movies" ></cpn><!--能够显示默认值,因为下面设置了默认值且没有进行传参数-->
<cpn :cmovies="movies" :cmessage="message"></cpn><!--对比,已经设置了参数,则会显示已经传过来的参数-->

</div>
<body>


<template id="cpn"><!--注意:组件模本只能包含有个根目录-->
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
{{cmessage}}
</div>
</template>
<script src="vue.js"></script>
<script>
/*父传子使用props*/
/*希望将父组件中的数据传递给子组件,然后让子组件进行展示*/

const cpn={
template:‘#cpn‘,
data(){
return{}
},
methods:{},
// props:["cmovies","cmessage"]

props:{
//定义成对象时,是可以对他进行类型的限制
// cmovies:Array,
// cmessage:String,
// 2提供一些默认值以及必须传递的值
cmovies:{
type:Array,
default(){ /*如果是数组的话,默认值必须设置成为一个工厂函数,进行返回 */
return []
}
},
cmessage:{
type: String,
default:"assasas", /*设置默认值*/
// required:true /*该属性是必须传递的值*/
}

}
};


const app=new Vue({ /*看成root父组件*/
el:‘#app‘,
data:{
message:‘你好啊‘,
movies:["海王","海贼王","海尔"] /*父组件的数据*/
},
components:{
cpn /*增强写法中的自变量属性增强写法*/
}
})
</script>
</body>
</html>

 

 

父子组件之间的通信

标签:oct   v-for   mes   pre   meta   template   pass   charset   通过   

原文地址:https://www.cnblogs.com/Damocless/p/11914565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!