1.父组件给子组件 传值
1.父组件调用子组件的时候 绑定动态属性
Home.vue
<v-header :title="title" :homemsg='msg' > </v-header> \\ data中要传递的数据
2、在子组件里面通过 props接收父组件传过来的数据
Header.vue
props:['title','homemsg','run','home'] //拿到传递过来的值
2.父组件给子组件 传方法
<v-header :title="title" :homemsg='msg' :run="run" > </v-header> /// :run="run" 方法
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<v-header :title="title" :homemsg='msg' > </v-header>
首页组件
</div>
</template>
<script>
/*
父组件给子组件传值
1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据
*/
import Header from './Header.vue';
export default{
components:{ 'v-header':Header },
data(){
return {
msg:'我是一个home组件11',
title:'HOme中首页',
}
},
methods:{
run(data){
alert('我是Home组件的run方法'+data) //run方法
}
</script>
<template>
<div>
<h2>我是头部组件----{{title}}-----{{homemsg}}</h2>
<button @click="run('123')">执行父组件方法</button> //run方法执行
<br />
<br />
</div>
</template>
<script>
export default{
data(){
return{
msg:'子组件的msg',
}
},
props:['title','homemsg','run',]
}
</script>