需求

从一个vue组件里把值传给另一个vue组件(父->子)

效果

步骤

1. 子组件内，props 定义变量，在子组件使用变量

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

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

2. 父组件内，使用子组件，属性方式给 props 变量传值

<template>
  <div>
    <!-- 目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入-->
    <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>