1.首先在子组件定义props属性,用于接受父组件传递的值msgSon,
2.在父组件中先在data函数中把要传递的消息定义好,定义为msg,在父组件中引用子组件,在模板处进行属性绑定如下
:msgSon = msg
就可以完成父向子的消息传递。
具体代码如下:
父组件:
<template>
<div class="app-container">
//属性绑定
<Header :title="msgHeader"></Header>
<h1>App 根组件</h1>
</div>
</template>
<script>
import Header from '@/components/Header/Header.vue'
export default {
components: {
Header
},
data(){
return {
//要传递的父属性
msgHeader: '购物车案例'
}
}
}
</script>
<style lang="less" scoped>
.app-container {
padding-top: 45px;
padding-bottom: 50px;
}
</style>
子组件:
<template>
<div class="header-container">{{title}}</div>
</template>
<script>
export default {
//声明props属性,接受父属性的值,不能轻易更改
props:['title'],
}
</script>
<style lang="less" scoped>
.header-container {
font-size: 12px;
height: 45px;
width: 100%;
background-color: #1d7bff;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: fixed;
top: 0;
z-index: 999;
}
</style>