Vue组件通信

1.1 Vue组件通信介绍

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

• 组件的数据是独立的，无法直接访问其他组件的数据。
• 想使用其他组件的数据，就需要组件通信

2.组件关系分类

1. 父子关系
2. 非父子关系

3.父子通信流程

1. 父组件通过 props 将数据传递给子组件
2. 子组件利用 $emit 通知父组件修改更新

1.2 Vue父传子通信

父向子传值步骤

1. 给子组件以添加属性的方式传值
2. 子组件内部通过props接收
3. 模板中直接使用 props接收的值

父组件中传值

import MyTest from './components/MyTest.vue'
  export default {
    data() {
      return {
        goodsList:[
          {id:1,name:"方便面",price:5.5,info:'方便'},
          {id:2,name:"瓜子",price:1.5,info:'美味'},
          {id:3,name:"花生",price:2.5,info:'好吃'},
        ]
      }
    },
    components: {
      MyTest,
    }
  }
<div class="app">
  <h2>App组件</h2>
  <!-- 父传子语法：
    父：通过自定义属性的方式，向子组件传递数据 -->
    语法格式：<my-test 属性名="传递的数据">
  <!-- <my-test :id="goodsList[0].id" :name="goodsList[0].name"></my-test> -->
  <!-- <my-test :item="goodsList[0]"></my-test> -->
  <my-test v-for="item in goodsList" :key="item.id" :obj="item"></my-test>
</div>

子组件接收

<template>
    <div class="goods">
        <h2>商品名称:{{obj.name}}</h2>
        <p>商品单价:{{obj.price}}</p>
        <p>商品描述:{{obj.info}}</p>

    </div>
</template>

<script>
    export default {
        // 子组件：需要通过props接受传递过来的数据
        props:['obj'] // props中的值一定要跟父组件自定义属性相同
        
    }
</script>

1.3 Vue子传父通信

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知
2. 父组件监听$emit触发的事件
3. 提供处理函数，在函数的性参中获取传过来的参数

子组件传值

<!--  子组件不能直接修改父组件数据，要让父组件自己修改；下面的写法是不正确的 -->
<!-- <button @click="obj.price--">砍一刀</button> -->
<!-- 子传父的核心语法"$emit('事件名',传递的数据)"; $emit是vue的内置方法,用来触发事件-->
<button @click="$emit('kanyidao', obj.id)">砍一刀</button>

父组件接收

<!-- 子传父的语法 <my-test @事件名="方法"> </my-test>-->
<my-test v-for="item in goodsList" :key="item.id" :obj="item" @kanyidao="changePrice"></my-test>
methods: {
  // 方法(val) {
  //   val就是接收到的数据（子组件传递过来的）
  // }
  changePrice(id) {
    console.log(id)
    let row = this.goodsList.find(item => item.id === id)
    row.price--
  }
}