Vue父传子详细教程

2024-06-07 05:05:27

本文父组件：shopping.vue

子组件：shoplist.vue

1.父组件引入子组件

1.1.引入组件

import shoplist from '../shoplist.vue'

1.2.注册组件

components: {
shoplist
}

1.3.使用组件

<shoplist></shoplist>

2.父组件定义数据

2.1.定义数组

const shoplistarr = [{
           img: "../../static/index/gsdz.png",
           shoplistname: "XDT190E托链轮总成（X-G）",
           newprice: "354",
           oldprice: "354"
       }
       , {
           img: "../../static/img/活动1.png",
           shoplistname: "XDT190E托链轮总成（X-G）",
           newprice: "354",
           oldprice: "354"
       }, {
           img: "../../static/img/活动2.png",
           shoplistname: "XDT190E托链轮总成（X-G）",
           newprice: "354",
           oldprice: "354"
       }, {
           img: "../../static/img/我的2.png",
           shoplistname: "XDT190E托链轮总成（X-G）",
           newprice: "354",
           oldprice: "354"
       }
   ]

2.2.把数据放入data中

data() {
           return {
               shoplistarr
           }
       },

3.父组件传值

3.1.在父组件使用子组件的标签内使用v-bind绑定父组件定义的数据

3.2.：shoplistarr要和子组件props接收的名字一致

3.3.“shoplistarr”应为data中的数据

<shoplist :shoplistarr="shoplistarr"></shoplist>

4.子组件接收数据

4.1.props接收指定数据

props: {
shoplistarr: Array
}

4.2.使用数据

直接在<template>里面使用{{shoplistarr}}就可

<view>
       <view class="shoplistxq1" v-for="item in shoplistarr">
           <img :src="item.img">
           <div class="shoplistname1">{{item.shoplistname}}</div>
           <div class="newprice1">
               ￥{{item.newprice}}
               <span class="oldprice1">￥{{item.oldprice}}
               </span>
           </div>
       </view>
   </view>

Vue父传子详细教程相关推荐

vue父传子mounted问题
vue父传子mounted问题问题描述: 场景是父组件向子组件传递参数,子组件在父组件的dialog里面,子组件是在mounted的时候渲染父组件传递的参数,出现bug,子组件mounted只加载一 ...
vue 父传子_Vue.js教程Vue基本指令
前言本文仅介绍基本常用指令(不包括自定义指令和相应的修饰符,这两个以后再写). 再附上官方API文档,大家也可以去看官方解释,更全面更具体.VueAPI 本文所有指令写在views文件夹下的Home ...
vue 父传子props
父传子(通过prop实现通信) 1.静态传递子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据. 通过v-bind绑定props的自定义的 ...
vue 父传子子传父实现方式
父传子: 主要步骤: 首先在子组件props中创建一个属性,用以接收父组件传过来的值: 然后父组件中引用子组件,并在子组件标签中添加子组件props中创建的属性: 最后把需要传给子组件的值赋给该属性. ...
vue 父传子值子改变父的值
1. 父传子的情况第一种情况父组件的写法 ··· 引入子组件到父组件里面然后注册子组件到父组件然后将组件放入到父组件的结构html中然后将父组件在data中定义的变量放在子组件中如上图 : ...
vue父传子值数组
父组件话不多说直接上代码定义parent来接收数组的值来调用自定义组件
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
自我总结篇之vue的组件通信（父传子子传父非父子）
一:父传子父组件代码如下: <template><div class="father"><child :message='message' :mes ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...

最新文章

热门文章