父组件
<template>
<div class="home">
<HelloWorld :data="传递的数据"/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
自定义组件
<template>
{{test}}
</template>
<script>
export default {
props:{
//从父组件传递过来的数据
data:{
type: Object //Object是对象,String是字符串,Array是数组
}
},
data() {
return {
test:""
}
},
//监听data的变化
watch: {
data:{
handler(){
this.test = this.data
},
immediate: true
}
},
}
</script>