vue父组件向子组件传值，子组件接收的三种方式

父组件<A :test="test"> 传给子组件B

B组件接收方式

1>props:'['param1'}},'param2']接收任意类型

2>props:{param1:String} 接收String类型

3>props:{param1:{type:String,default:'test1'}} 接收String类型，默认值A

父组件：A组件

<template>
  <div>
    <B :param1="param1" :param2="param2"></B>
    <B1 :param1="param1" :param2="param2"></B1>
    <B2 :param2="param2"></B2>
  </div>
</template>

<script>
import B from "./B";
import B1 from "./B-1";
import B2 from "./B-2";
export default {
  name: "A",
  components: { B, B1, B2 },
  data() {
    return {
      param1: "A",
      param2: "B"
    };
  }
};
</script>

子组件B通过方式一获取父组件传的参数

<template>
  <div class="container">
    <span>
        方式1：props:'['param1'}},'param2']接收任意类型
    </span>
     <span>param1:{{param1}},param2:{{param2}}</span>
  </div>
</template>

<script>
export default {
  name: "B",
  props: ["param1", "param2"],
  data() {
    return {
    }
  },
  methods: {}
}
</script>

子组件B1通过方式二获取父组件传的参数

<template>
  <div class="container">
    <span>方式2：props:{param1:String} 接收String类型</span>
    <span>param1:{{param1}},param2:{{param2}}</span>
  </div>
</template>

<script>
export default {
  name: "B1",
  props: {
    param1: String,
    param2: String
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {}
};
</script>

子组件B2通过方式三获取父组件传的参数

<template>
  <div class="container">
    <span>方式3：props:{param1:{type:String,default:'test1'}} 接收String类型，默认值A</span>
    <span>param1:{{param1}},param2:{{param2}}</span>
  </div>
</template>

<script>
import B from "./B";
export default {
  name: "B2",
  props: {
    param1: {
      type: String,
      default: "test1"
    },
    param2: {
      type: String,
      default: "B"
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>