Vue组件通信(相互传值)

最新推荐文章于 2024-07-16 16:34:25 发布

老李头的代码生活

最新推荐文章于 2024-07-16 16:34:25 发布

阅读量307

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/laoli360/article/details/120496259

版权

本文介绍了Vue组件间的通信方式，包括父向子组件通过props传递数据，配合v-for进行数据循环，以及遵循单向数据流的原则。同时，文章详细阐述了子组件如何通过$emit向父组件传递值，实现数据的反向流动，并通过代码示例进行说明。

摘要由CSDN通过智能技术生成

组件通信-父向子-props

在实际工作中,不可能每个组件的值都是一样的,这时候就需要学会组件通信,互相传值

因为每个组件的变量和值都是独立的

组件通信先暂时关注父传子, 子传父

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

例如: App.vue(父) MyProduct.vue(子)

封装一个商品组件MyProduct.vue - 外部传入具体要显示的数据, 如下图所示

components/MyProduct.vue - 准备标签

<template>
  <div class="my-product">
    <h3>标题: {
  { title }}</h3>
    <p>价格: {
  { price }}元</p>
    <p>{
  { intro }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

子元素内写入props:['数据','数据''数据''数据']

他就会接收到这几个数据的值,他的使用方法和插值表达式{ {vue变量}}方式是一样的

App.vue中使用并传入数据

<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>