<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. 微信小程序自定义组件——接受外部传入的样式类

    https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html 外部样式类 有时, ...

  2. ubuntu下安装软件时报错解决:Unmet dependencies. Try 'apt-get -f install' with no packages

    在错误后面运行以下代码,补全依赖项: sudo apt-get -f install

  3. metasploit安卓木马

    metasploit---安卓木马入侵 (仅供学习使用,禁止非法使用) 1.生成木马程序 msfvenom -p android/meterpreter/reverse_tcp LHOST=本机ip ...

  4. 遇到 GLFW 我的demo可以运行 但是公司的程序调用我的so运行不起来

    //to do 原       因:  发现 自身demo的程序的shaders更新了  但是公司程序却没有更新 解决办法:更新公司程序的shaders 为最新版本 吸取的教训: 不仅仅要更新公司程序 ...

  5. 数据结构之链表(LinkedList)(一)

    链表(Linked List)介绍 链表是有序的列表,但是它在内存中是存储如下 1)链表是以节点方式存储的,是链式存储 2)每个节点包含data域(value),next域,指向下一个节点 3)各个节 ...

  6. iOS - starckView 类似Android线性布局

    同iOS以往每个迭代一样,iOS 9带来了很多新特性.UIKit框架每个版本都在改变,而在iOS 9比较特别的是UIStackView,它将从根本上改变开发者在iOS上创建用户界面的方式.本文将带你学 ...

  7. 制作win10系统及安装win10系统

    制作win10系统 1.登陆msdn,下载win10系统,打开迅雷下载器,复制完该段代码,直接开始下载,网址:https://msdn.itellyou.cn/ 2.下载软碟通,下载网址:https: ...

  8. C++ 虚表虚函数怎么就实现了多态?

    虚表vftable,编译器为每个拥有虚函数的类都建有一张虚函数表,里面存有虚函数的入口指针(地址).在类对象的内存布局中,先是一个vfptr虚表指针,指向虚表首地址,而后通过偏移量的形式来访问虚表中的 ...

  9. Java--8--新特性--Stream API

    Stream API 提供了一种高效且易于使用的处理数据的方式,(java.util.stream.*) 他可以对数组,集合等做一些操作,最终产生一个新的流,原数据是不会发生改变的. “集合”讲的是数 ...

  10. Linux磁盘管理——虚拟文件系统

    前言 Linux支持众多文件系统,包括: 传统文件系统:ext2 / minix / MS-DOS / FAT (用 vfat 模块) / iso9660 (光盘)等等:日志式文件系统: ext3 / ...