1.父组件给子组件传值 home父组件 header子组件 关键字props
home代码
<template>
<div>
<v-header :title="title" :run="run"></v-header>
<h2>我是home组件</h2>
</div>
</template>
<script>
import Header from './Header'
export default {
data() {
return {
msg: "msg",
title:"hello"
};
},
components:{
'v-header':Header
},
methods: {
run(val) {
alert(val);
}
},
};
</script>
header代码
<template>
<div>
<h1>我是header组件--{{title}}</h1>
<button @click="run(123123)">调父组件函数</button>
</div>
</template>
<script>
export default {
data() {
return {
};
},
props:['title','run']
};
</script>
效果: