欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE2.0 父组件传值子组件

程序员文章站 2024-02-02 23:05:58
...

本文主要介绍VUE2.0父组件像子组件传值

1.首先父组件要引入子组件,然后通过传值:data=data的形式传参,其中第一个data表示子组件接收的数组名,可以是字符串、布尔值、JSON对象等形式,第二个data则是父组件的对象参数。(data不是唯一,可以自定义,下文案例用food表示)
引入子组件JS关键代码如下:

<script>
    import CartControl from '@/components/CartControl/CartControl';
     export default {
        components: {//注册组件
          CartControl
        }
    }
</script>

DOM截点关键代码如下:

<template>
    <div>
      <cart-control :food="food"></cart-control>
    </div>
<template>

2.子组件接收父组件的参数。通过props{data{type:array}}的是形式接收对象,type后面对应的类型根据实际情况做调整。

<script>
    export default {
        props: {
          food: {
            type: Object
          }
        }
    }
</script> 

Tips:如此这般,你就可以在子组件获取父组件的传值了,相当于你在data() {return {food:[]}}创建了一个food的对象。在DOM截点可以直接使用food,也可以通过this.food来获取对象。
完整案例参考
父组件结构图如下:
VUE2.0 父组件传值子组件
子组件结构图如下:
VUE2.0 父组件传值子组件
如有疑问,请留言。