项目中经常用到组件与组件的传参以及父组件跟子组件的传参,还有子组件跟父组件的传参,下面大概说下父组件向子组件传参的整个过程,如果有不对的地方,望指正。
在父组件中:
<template>
<div>
<child :table="details"></child>
</div>
</template>
<script>
import Child from './child'
export default {
name: "father",
components:{Child},
data(){
return{
details:{
status:10,
message:"我是父组件传递过来的值"
}
}
}
}
</script>
<style scoped>
</style>
子组件:
<template>
<div>
<button>按钮</button>
<p>{{table.status}}</p>
<p>{{table.message}}</p>
</div>
</template>
<script>
export default {
name: "child",
props:{
table:{
type:Object
}
}
}
</script>
<style scoped>
</style>
在这里,父组件向子组件传递的是一个对象,而我们利用v-bind动态绑定了table,以一个对象的形式传递过去,在子组件中用props进行接受,并且接受的名称,也就是上面所述的table,跟父组件动态绑定的名称一致,里面的type,是传递的类型,如果不符合,会报错,也可以向下面这样。
<template>
<div>
<button>按钮</button>
<p>{{table.status}}</p>
<p>{{table.message}}</p>
</div>
</template>
<script>
export default {
name: "child",
props:["table"]
}
</script>
<style scoped>
</style>
这种不需要传递的类型,但是需要注意的是props接受的是数组,如果是对象的话,接受的是对象,大家需要注意。