Vue组件的使用，以及父组件传值给子组件

1.定义子组件

spuId显示父组件的值

<template>
  <div class="app-container">
    {{spuId}}
  </div>
</template>

2.导出组件

export default {
  name: "SpecificationValue",
  data() {
    return {
      
    };
  },
  //用于接收父组件传递的spuId
  props: {
    spuId: {
      type: String,
    },
  },

3.父组件引入子组件

//1.引入子组件
import SpecificationValue from "@/views/mall/components/SpecificationValue/index.vue";

export default {
  name: "specification",
  components:{
	//2.注册子组件
    SpecificationValue
  },
  data() {
    return {
      spuId:'12345',//父组件声明需要传递的值
    };
  },
 }

<template>
  <div class="app-container">
    	3.使用子组件，使用v-bind绑定需要传递的值
        <SpecificationValue  v-bind:spuId="spuId"/>
    
  </div>
</template>