vue 父组件给子组件传值demo

父组件向子组件传值

儿子页面定义个props，然后传值，老子页面通过自定义标签的属性绑定获取值  :fatherData='fatherData'

props属性值类型

字符串string
数值Number
布尔值Boolean
数组Array
对象Object

 

儿子页面：

<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>

爸爸页面：

<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>

 

总结：爸爸页面关键代码：

儿子页面关键代码：