父向子传值:通过内置属性props获得父组件传递过来的值
父组件:Father.vue
<template>
<div>
<!-- 子组件:Son;其中:userinfo为子组件中props里的接收对象,users为父组件data中的传递对象-->
<!-- 应用子组件Son-->
<Son :userinfo="users" />
</div>
</template>
<script>
//导入子组件Son
import Son from "@/components/Lianxi_22/chuangzhi/Son";
export default {
name: "Father",
data(){
return{
users:[
{name:'刘备',age:'29',address:'小沛'},
{name:'诸葛亮',age:'26',address:'襄阳'},
{name:'周瑜',age:'29',address:'江东'},
]
}
},
//注册子组件Son
components:{Son}
}
</script>
<style scoped>
</style>
子组件:Son.vue
<template>
<div>
<ul>
<li v-for="(item,index) in userInfo" :key="index">
{{item.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Son",
props:{
//userInfo为父组件传递过来的值,users数组
userInfo:{
type:Object,//父组件传递的值的类型
require:true,//判断是否必须传值
}
}
}
</script>
<style scoped>
</style>
对于父组件向子组件传递数据的解释:
子组件向父组件传值:通过内置属性$emit获得子组件传递过来的值
子组件:
父组件:
对于子组件向父组件传递数据的解释:
兄弟组件之间的传值:通过内置属性$on和$emit来进行数据传递;其中$on用来监听$emit的事件是否触发,$emit用来触发事件;该方法也可以用来进行父组件向子组件传值,子组件向父组件传值;
兄弟1:
兄弟2:
对于兄弟之间数据传递的解释:
跨级组件之间的数据传递:通过provied发布数据,inject接收数据
爷爷:
儿子:
孙子:
对于跨级组件的解释: