Vue父向子传递消息

qq_44872331

于 2023-03-11 10:30:30 发布

阅读量194

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44872331/article/details/129460001

版权

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>