Vue父子组件传参的方式之props

在Vue中我们可以通过props来进行父子之间的传参

比如我们有A,B两个组件,A是B的父组件,B组件想用A组件里面的数据可以通过如下的方式:

<template>

  <div>

    <!-- 子组件 注： 此方法传递的是静态的数据 -->

    <MyItem 属性名="属性值" />

 

　<!-- 子组件 传递动态属性值的时候需要给属性名前面加上冒号,:是v-bind的简写 -->

    <MyItem :属性名="属性值" />

  </div>

</template>

 

<!-- 子组件 -->

export default {

  name: "MyItem",

  // props的值是一个数组，在里面写上你在父组件里面定义好的属性名就可以去慢板里面直接使用，在js里面使用的时候前面要加上this，多个属性名之间用逗号隔开

  props: ["属性名","xxx"],

  data() {

    return {};

  },