标签：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
