1.父组件给子组件传值步骤
- 父组件调用子组件的时候,绑定动态属性
- 在子组件通过props接收父组件传过来的数据
2.实现实例
Header.vue
<template>
<div>
<br>
<h2 class="header">我是头部组件-------{{title}}-------{{homemsg}}</h2>
<button @click="run('12345678')">测试执行父组件的run方法</button>
<hr>
</div>
</template>
<script>
export default {
name: "Header",
data(){
return{
msg:"Header.vue是一个头部组件",
}
},
methods:{
},
props:["title","homemsg","run"]
}
</script>
<style scoped>
.header{
color: red;
background: black;
}
</style>
Home.vue
<template>
<div>
<v-header :title="title" :homemsg="msg" :run="run"></v-header>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
name: "Home",
data(){
return{
msg:"Home.vue是一个首页组件",
title:"首页",
}
},
methods:{
run(data){
alert("我是Home组件的run方法" + data);
}
},
mounted(){
},
components:{
"v-header":Header,
}
}
</script>
<style scoped>
</style>
3.父组件给子组件传值,子组件对值进行验证
props:{
"title":String,
"homemsg":String,
"run":Function
/* ["title","homemsg","run"]*/
},