<template>
<div>
爸爸
<div style="background-color:yellow;margin-top:10px" v-for="(el,index) in getArrary" :key="index" @click="sendId(el.id)">{{el.id}}</div>
<Good :send='data'></Good>
</div>
</template>
<script>
import Good from './good'
export default {
name: 'helloworld',
components: { Good },
data () {
return {
getList: {
data: 'ok'
},
data:'',
getArrary:[
{
id:
},
{
id:
},
{
id:
},
{
id:
},
{
id:
}
]
}
},
methods: {
sendId:function(item){
this.data=item
}
}
}
</script>
// 年后
<style > </style>

上面是父组件

下面是子组件

<template>
<div class="hello">
儿子 {{this.send}}
</div>
</template>
<script>
export default {
name: 'project',
props: ['send'],
data () {
return {
}
},
methods: {
},
created: function () {
// this.getSomeThing()
},
watch:{
getNewData:function (){
return this.send
}
}
}
</script>

点击第一行前

点击第一行后

vue点击父组件里面的列表动态传值到子组件的更多相关文章

  1. vue 父组件动态传值至子组件

    1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...

  2. vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数

    父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...

  3. iview 父组件动态传值给子组件

    父组件 <maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close=&quo ...

  4. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  5. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  6. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  7. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  8. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  9. vue 组件-父组件传值给子组件

    父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...

随机推荐

  1. Spring循环依赖的三种方式以及解决办法

    一. 什么是循环依赖? 循环依赖其实就是循环引用,也就是两个或者两个以上的bean互相持有对方,最终形成闭环.比如A依赖于B,B依赖于C,C又依赖于A.如下图: 注意,这里不是函数的循环调用,是对象的 ...

  2. 基于【 springBoot +springCloud+vue 项目】一 || 项目架构简介

    一.前言 基于前期学习以及工作经验积累,持续更新基于springboot+springcloud+vue的demo项目.

  3. Linux挂载Windows文件夹

    # sudo mount -t \ -o user=username \ //Windows用户名 -o uid=myname \ //Linux用户名 -o gid=users \ -o defau ...

  4. 2-Spark-1-性能调优-数据倾斜2-Join/Broadcast的使用场景

    技术点:RDD的join操作可能产生数据倾斜,当两个RDD不是非常大的情况下,可以通过Broadcast的方式在reduce端进行类似(Join)的操作: broadcast是进程级别的,只读的. b ...

  5. springboot系列(九)springboot使用druid数据源

    Druid是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控DB池连接和SQL的执行情况,可以说是针对监控而生的DB ...

  6. Oracle存储过程、函数、包加密wrap

    wrap加密可以将PL/SQL的代码实现部分隐藏,提高代码的安全性,如存储过程.函数.包等都隐藏. wrap加密的方法有两种,下面以函数为例分别介绍一下: 方法一: 编写好函数后保存到 d:\test ...

  7. C++——流类库和输入/输出

    前言 数据是怎么写道磁盘的? 代码里面我们一个读写调用似乎就能将数据从磁盘读写.仿佛代码是直接和磁盘打交道.以我们最常见的笔记本.或台式机的磁盘SATA盘为例,其受南桥上ATA控制器支配,这里面传输的 ...

  8. windows 数据备份

    xcopy 数据目录   备份目录  /e /c /q /h /r /y at 00:00 /every:M,T,W,Th,F,S,Su d:\批处理文件名

  9. 手写butterknife来剖析其原理

    基本使用: 对于butterknife库我想基本上都非常熟了,如今在项目中用它也用得非常之频繁了,不过为了学习的完整性,先来简单的回顾一下基本用法,先新建一个工程: 然后给textview增加一个点击 ...

  10. 云计算(6)--一些MapReduce的例子

    例1:文件的字符串查找 这里reduce不做merge的工作,因为每行都是不一样的,不能merge. 与传统的grep程序相比,使用MapReduce可以加快处理,因为1它是Distributed的, ...