VUE组件通信

1.什么是组件通信

在vue里面，因为每个组件的变量和值都是独立的，所以两个不同的组件之间如果想要进行变量和值的交互，就需要建立通信关系

2.如何区分父组件和子组件

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

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

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

3.vue组件通信——父组件向子组件传值（使用props属性）

下面我就通过一个案例给大家说明步骤

//1.创建子组件components/MyProduct.vue
<template>
<!-- 3.把变量插到标签内，变量里的内容是父组件传过来的值-->
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default {
//2.组件内在props属性定义变量, 用于接收外部传入的值
  props: ['title', 'price', 'intro']
}
</script>

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

<template>
  <div>
    <!-- 3.把组件名放入结构中 -->
    <!-- 目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
        父组件向子组件传值的步骤
    2.父组件内，使用子组件属性方式向props变量传值 -->
    <product :title="title1" :price="price1" :intro="intro1"></product>
    <product :title="title2" :price="price2" :intro="intro2"></product>
    <product :title="title3" :price="price3" :intro="intro3"></product>
  </div>
</template>

<script>

//1.导入组件
import Product from "./components/Product.vue";
export default {
  data() {
    return {
    //父组件里的值
      title1: "超级好吃的口水鸡",
      price1: 20,
      intro1: "开业大酬宾，全场8折",
      title2:"超级可爱的可爱多",
      price2:50,
      intro2:"老板不在家，全场1折",
      title3:"好贵的北京烤鸭",
      price3:150,
      intro3:"好贵啊，但是好吃"
    };
  },
  //2.注册组件
  components: {
    Product, //组件名和组件对象名一致可以简写
  },
};
</script>

<style>
</style>

4.vue组件通信——子组件向父组件传值（使用this.$emit方法）

语法:

• 父组件: @自定义事件名="父methods函数"
• 子组件: this.$emit("自定义事件名", 需要传给组件的值) - 执行父methods里函数代码

 下面我就通过一个案例给大家说明步骤

//子组件components/MyProduct.vue
<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
    <button @click="subFn">宝刀-砍1元</button>
  </div>
</template>

<script>

export default {
//使用index变量来接收需要传值的对象
  props: ['index', 'title', 'price', 'intro'],
  methods: {
//执行点击事件的函数
    subFn(){
//1.通过this.$emit方法来触发父组件里自定义事件的执行，其中subprice是自定义事件名，this.index和1是需要传的值
      this.$emit('subprice', this.index, 1) // 子向父
    }
  }
}
</script>

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

//父组件App.vue
<template>
  <div>
    <!-- 目标: 子传父 -->
    <!-- 2. 父组件, @自定义事件名="父methods函数"
             注意：@后面的自定义事件名必须和子组件里的自定义事件名保持一致 -->
    <MyProduct v-for="(obj, ind) in list" :key="obj.id"
    :title="obj.proname"
    :price="obj.proprice"
    :intro="obj.info"
    :index="ind"
    @subprice="fn"
    ></MyProduct>
  </div>
</template>

<script>

import MyProduct from './components/MyProduct_sub'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  components: {
    MyProduct
  },
  methods: {
//3.只要子组件里的subfn函数触发就会执行fn函数
    fn(inde, price){//形参inde和price用来接收子组件传过来的实参
      // 逻辑代码
      this.list[inde].proprice > 1 && (this.list[inde].proprice = (this.list[inde].proprice - price).toFixed(2))
    }
  }
};
</script>

<style>
</style>

在实际开发中vue组件通信是经常用的，尤其是父组件向子组件传值和子组件向父组件传值，所以搞明白他们之间的通信关系是很重要的