父组件<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>