父组件向子组件传递数据

一、使用props逐级透传

祖宗传给父亲，父亲传给儿子，递进传递

祖宗组件  grandfather.vue

<template>
    <div>
        <h3>祖宗</h3>
        <father title="祖宗的财产"></father>
    </div>
</template>

<script>
import father from './father.vue'
export default {
  components: {
     father 
  },

}
</script>

<style>

</style>

父亲组件 father.vue

<template>
    <div>
        <h1>父组件</h1>
        <children :title="title"></children>
    </div>
</template>

<script>
import children from './Children.vue'
export default {
  components: { 
    children 
  },
  props:{
    title:{
        type:String
    }
  }

}
</script>

<style>

</style>

孙子组件 children.vue

<template>
  <div>
    <h1>子组件</h1>
    <p>{{ title }}</p>
  </div>
  
</template>

<script>
export default {
  props:{
    title:{
        type:String
    }
  }
}
</script>

<style>

</style>

二、provide和inject 依赖注入

• 祖宗是provide，依赖提供者，孙子是inject注入到孙子里

祖宗组件

<template>
    <div>
        <h3>祖宗</h3>
        <father></father>
    </div>
</template>

<script>
import father from './father.vue'
export default {
  components: {
     father 
  },
  provide:{
    message:"爷爷的财产"
  }

}
</script>

<style>

</style>

孙子组件

<template>
  <div>
    <h1>子组件</h1>
    <p>{{ message }}</p>
  </div>
  
</template>

<script>
export default {
   inject:["message"]
}
</script>

<style>

</style>