Vue parent component passes value demo to child component

The parent component passes the value to the child component

The son page defines a props, and then passes the value, the Laozi page obtains the value through the attribute binding of the custom tag:fatherData='fatherData'

props attribute value type

String String
Numerical Number
Boolean
Array Array
Object Object

 

Son page:

<template>
  <div class="my-child">
    <h3>我是子组件</h3>

    <p>儿子的数据:都是玩具</p>
    <ul>
      <li>{
   
   {childData.joy}}</li>
      <li>{
   
   {childData.fly}}</li>
    </ul>

    儿子继承爸爸的钱财

    <p>{
   
   {fatherData.money}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return{
      childData:{
        joy:'变形金刚',
        fly:'直升机'
      }
    }
  },
  props:{
    fatherData:Object
  },
  methods:{

  }
};
</script>

Dad page:

<template>
  <div class="my-parent" style="background:#fff">
    <h3>我是父组件</h3>

    <p>爸爸的数据</p>
    <ul>
      <li>钱财：{
   
   {fatherData.money}}</li>
      <li>工作：{
   
   {fatherData.job}}</li>
    </ul>
    <child-my :fatherData='fatherData'></child-my>
  </div>
</template>

<script>
import childMy from "../../../../common/child-my.vue";
export default {
  components:{childMy},
  data(){
    return{
      fatherData:{
        money:100000000,
        job:'程序员'
      }
    }
  },
  methods:{

  }
};
</script>

 

Summary: The key code of the father page:

The key code of the son page: