Vue父子组件传值

父组件：
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<v-header :title="title" :run="run" ：home="this"></v-header>
首页组件
</div>
</template>
<script>
/*
父组件给子组件传值
1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据
*/
import Header from './Header.vue';
export default{
data(){
return {
msg:'我是一个home组件',
title:'首页111'
}
},
components:{//路由
'v-header':Header
},
methods:{
run(data){
alert('我是Home组件的run方法'+data);
}
}
}
</script>
<style lang="scss" scoped>
/*css  局部作用域  scoped*/
h2{
color:red
}
</style>
子组件：
<template>
<div>
<h2>我是头部组件--{{title}}</h2>
<button @click="run('123qwe')">调用父组件方法</button>
<button @click="getParent()">获取父组件的数据和方法</button>
</div>
</template>

<script>

export default{

data(){

return{
msg:'子组件的msg'
}
},
methods:{
getParent(){
// alert(this.title)
// alert(this.home.title)
this.home.run()
}

},

//https://cn.vuejs.org/v2/guide/components.html#Prop-验证

props:["title","run"]//接收父组件的值不验证
props:{//接收父组件的值不验证

'title':String,

'run':Function,//类型有待确定
'home':Objct    //类型有待确定
}

}

</script>