Vue组件之间值的传递

父向子传值:通过内置属性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接收数据

爷爷:

 儿子：

 孙子：


对于跨级组件的解释：