13、父组件给子组件传值

传值步骤：
1、首先定义一个需要传的参数（在父组件中）

image.png

2、在子组件引用处给其标签绑定相应属性（在父组件中）

image.png

3、' props'表示从父组件接受'title'这一参数

image.png

4、直接引用

image.png

代码：
Home.vue:

<template>

<div>
<v-header :title="title" :run="run" :home="this"></v-header>
{{msg}}
</div>
</template>

<script>
import Header from './Header.vue'//哪里用，就在那里引用（比如，Home.vue这个组件里要用，则在此处引入）
export default {
name: "home",
data(){
return {
msg:'我是一个首页',
title:'我是首页组件传递过来的值',
}
},
methods:{
run(data){
alert('我是父组件方法'+data);
}
},
components:{
'v-header':Header,
}
}
</script>

<style scoped lang="scss">
h2{
color:red;
}
</style>

Header.vue:
<template>
<div>
<h2>我是一个头部组件--{{title}}</h2>
<button @click="run(123)">执行父组件的方法</button>
<button @click="getParent()">获取父组件数据和方法</button>
</div>
</template>

<script>
export default {
name: "header",
data(){
return {
msg:'msg',
}
},
methods:{
getParent(){
console.log(this.title)
console.log(this.home.run(123))
console.log(this.run(123))
}
},
方式一：
props:['title','run','home']//表示接收父组件传过来的title
方式二：验证父组件传过来数据的合法性
props:{
"title":String,
"run":Function,
"home":Object,
}
}

</script>

<style scoped>

</style>