父子组件通信
在子组件添加 props属性（数组），可添加多个 ；
在组件渲染的html中 用v-bind进行属性绑定 :子属性=“父属性”
属性即可在子组件模板使用{{属性}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<com1 v-bind:cmessage="message" v-bind:cmovies="movies"></com1>
</div>
<template id="temp1">
<div>
<h4>{{cmessage}}
{{cmovies}}</h4>
<com2 :zcmovies="cmovies"></com2>
</div>
</template>
<template id="comp2">
<div>
<li v-for="item in zcmovies">{{item}}</li>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
message: '组件通讯-Test',
movies: ['海贼王', '海王', '海尔兄弟']
},
components: {
com1: {
template: '#temp1',
props: {
cmessage: {
type: String,
default: ['blank'],
required: true
},
cmovies: {
type: Array,
default: function() {
return []
},
validate: function(value) { //自定义验证好书,这个值必须匹配字符串中的一个| --待验证
return ['海贼王', '海王', '海尔兄弟', '哪吒闹海'].indexOf(value) !== -1
}
}
},
components: {
com2: {
template: '#comp2',
props: ['zcmovies']
}
}
}
}
});
</script>
</body>
</html>
<!-- 父子组件通信
1.在子组件添加 props属性（数组），可添加多个 ；
2.在组件渲染的html中 用v-bind进行属性绑定 :子属性=“父属性”
3.属性即可在子组件模板使用{{属性}}-->
