1:父组件向子组件传递数据
父组件向子组件传值:
1:父组件调用子组件的时候 绑定动态属性
<v-header :title='title'></v-header>
2:在子组件中通过props接受父组件传过来的数据
可以将数据 方法 或则 整个父组件实例 传给子组件
props:['title','msg','run','home']
父组件:
<template>
<div>
<!-- 所有内容都要被根节点包含 -->
<!--父组件通过props向子组件传递数据和方法,就在子组件上绑定相关属性-->
<v-header :title='title' ::run='run' :home='this'></v-header>
<br>
<h2>这是一个首页组件</h2>
<hr>
</div>
</template>
<script>
import Header from './Header'
export default {
components:{
'v-header':Header
},
data(){
return{
title:'当前位置'
}
},
methods:{
run(msg){
alert(this.title+msg)
]
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>
子组件:
<template>
<div>
<!-- 子组件接收父组件传递过来的数据-->
<h1>这是头部组件--{{title}}</h1>
<button @click="run('123')">执行父组件传过来的方法,并向父组件传递参数</button>
<button @click="getParent()">获取父组件的数据和方法</button>
</div>
</template>
<script>
export default {
data(){
msg:'m,sh'
},
methods:{
getParent(){
alert(this.title)
alert(this.home.msg)
//执行父组件中的run方法
this.home.run()
}
},
props:['title','run','home']//方式一
props:{//方式二 父向子传值,子组件可以对数据类型进行验证
'title':String
}
}
</script>
<style lang="scss" scoped>
h1{
color: skyblue;
}
</style>
这种方式就是父组件向子组件传值以及传递方法和整个实例的过程