一、Vue组件通信

• 每个组件都有自己的数据, 提供在data中, 每个组件的数据是独立的, 组件数据无法互相直接访问 (合理的)
• 但是如果需要跨组件访问数据, 就需要用到组件通信
  
• 要是有一万个商品？？？？就要写一万个吗？
• 函数调用：看起来调用时用一个函数，执行结果效果都是不一样？ 设置形参？在调用的时候传入实参？

特别函数：
1、设置组组件内所有特别，形参
2、组件调用的时候，传入所谓的实参？

（一）组件通信—父传子

1. 组件通信 - 父传子 props 传值

• 父传子的基本语法:
• ①、父组件通过给子组件加属性传值

<!-- 3.所谓调用函数：传实参 -->
<cpt-4 title="超级好吃的口水鸡" price="50" num="8"></cpt-4>
<cpt-4 title="泰国榴莲" price="288" num="6"></cpt-4>

• ②、子组件中, 通过props属性接收

props:["title","price","num"]//1. 设置形参,语法固定

• 创建components/04-cpt.vue子组件文件,子组件中, 通过props属性接收。

<template>
  <div class="box">
    <!-- 2. 使用：形参用到时候，当做变量！类似data初始化内数据变量！ -->
    <h3>标题：{{ title }}</h3>
    <p>价格:{{price}}元</p>
    <p>开业大酬宾,全场{{num}}折</p>
  </div>
</template>
<script>
export default {
    // 特别封装：如何设置所谓的形参
    props:["title","price","num"]//1. 设置形参,语法固定
}
</script>
<style scoped>
    .box{
        border:1px solid black;
    }
</style>

• App.vue父组件里面调用cpt4子组件，父组件通过给子组件加属性传值。

<template>
  <div>
    <h1>超市商品列表:</h1>
    <!-- 3.所谓调用函数：传实参 -->
    <cpt-4 title="超级好吃的口水鸡" price="50" num="8"></cpt-4>
    <cpt-4 title="泰国榴莲" price="288" num="6"></cpt-4>
  </div>
</template>
<script>
import cpt4 from "./components/04-cpt.vue"
export default {
  components:{
    cpt4,
  }
}
</script>

• 在data里面传递数据，通过实参来传递形参的值。

<template>
  <div>
    <h1>超市商品列表:</h1>
    <!--