父组件：
<template>
<div>
<HelloWorld :tag="tag" :arr="arr"></HelloWorld>//向子组件传递了两个变量tag和arr
</div>
</template>
<script>
import HelloWorld from './component/HelloWorld'
export default {
name:"App",
data:function(){
return {
tag:'篮球',
arr:['a','b','c']
};
},
components:{
HelloWorld
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
子组件接受并使用参数：
<template>
<div>
<h1>{{tag}}</h1>//显示父组件传入的tag变量
<span v-for="item in arr" :key="item">{{item}}</span>//显示父组件传入的arr
</div>
</template>
<script>
export default ({
data:function(){
},
// props:['tag','arr']//这种接受方式也是可以的，但是接收到的所有变量都会转为字符串
props:{//这里面设置的变量和data中设置的变量使用方式一样，可以直接在页面显示也可以在方法中使用
tag:{
type:String,//接受到的变量的类型
default:''//默认值，即如果父组件没有传入参数tag变量的值
},
arr:{
type:Array,
required:true//是否要求必传
}
}
})
</script>
<style scoped>
</style>