父组件要正向地向子组件传递数据或参数，子组件收到后，根据传递过来的数据不同，渲染不同的页面内容，或者执行操作。
这个正向传递数据的过程是通过props来实现的。子组件使用props来声明需要从父组件接受的数据。
注意的：
在js中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的。
父组件中
<template>
<div>
<HelloWorld :message1="messageToHelloWorld"></HelloWorld>
<div/>
<template/>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
data() {
return {
messageToHelloWorld:'我是父组件向下传递的信息'
}
},
components: {
HelloWorld
}
}
</script>
子组件中
<template>
<div class="hello">
<h1>{
{
msg }}</h1>
<h2>Essential Linkssss</h2>
<h3>{
{
message1 }}</h3>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: ['message1'],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
业务中，还有比较常用的组件验证：
Vue.component('my-component',{
props:{
//必须是数字类型
propA:Number
//必须是字符串或数字类型
propB:[String,number]
//布尔值,如果没有定义，默认值是true
propC:{
type:Boolean，
default:true
},
//数字，而且是必传
propD:{
type:Number,
required:true
},
//如果是数组或对象，默认值必须是一个函数来返回
propE:{
type:Array,
default:function(){
return [];
}
},
//自定义一个验证函数
propF:{
validator:function (value){
return value>10
}
}
}
});
props的驼峰命名法
<div id="app">
<cpn :c-info="info" :child-my-message="message"></cpn>
</div>
<template id="cpn">
<div>
<h2>{
{cInfo}}</h2>
<h2>{
{childMyMessage}}</h2>
</div>
</template>
const cpn={
template:'#cpn',
props:{
cInfo:{
type:Object,
default(){
return{
}
}
},
childMyMessage:{
type:String,
default: ''
}
}
}
const app=new Vue({
el:'#app',
data:{
info:{
name:'why',
age:18,
height:1.88
},
message:'hello world'
},
components:{
cpn
}
})