vue点击父组件里面的列表动态传值到子组件
<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点击父组件里面的列表动态传值到子组件的更多相关文章
- vue 父组件动态传值至子组件
1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...
- vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数
父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...
- iview 父组件动态传值给子组件
父组件 <maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close=&quo ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况
在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...
随机推荐
- php json_encode()函数返回对象和数组问题
php json_encode() 函数格式化数据时会根据不同的数组类型格式化不同类型的json数据 索引数组时 <?php $arr = [1,2,3,4,5]; print_r(json_e ...
- 【转载】网站配置Https证书系列(一):腾讯云申请免费的SSL证书的流程步骤(即https安全连接使用的证书)
很多网站为了安全性考虑都会上https安全连接,此时就需要考虑使用SSL证书,其实在腾讯云这边提供有免费的SSL证书申请,登录腾讯云管理控制台后,进入SSL证书管理页面,里面有个申请免费证书.腾讯云申 ...
- EntityFramework进阶(四)- 实现批量新增
本系列原创博客代码已在EntityFramework6.0.0测试通过,转载请标明出处 我们可以结合Ado.Net的SqlBulkCopy实现SqlServer数据库的批量新增,其他类型的数据库的批量 ...
- java保证多线程的执行顺序
1. java多线程环境中,如何保证多个线程按指定的顺序执行呢? 1.1 通过thread的join方法保证多线程的顺序执行, wait是让主线程等待 比如一个main方法里面先后运行thread1, ...
- MySql 学习之 一条更新sql的执行过程
上一篇文章咱们说了一条查询sql的执行过程.如果没有看过上一篇文章的可以去看下上一篇文章,今天咱们说说一条更新sql的执行过程. 上面一条sql是将id为1的分数加上10. 那么它的执行流程是怎样的呢 ...
- SSH与ansible 部署方法与核心模块简介
SSH与ansible 部署方法 部署环境 管理服务器 172.16.1.61 NFS服务器 172.16.1.31 备份服务器 172.16.1.41 1检查SSH服务是否运行并开启服务 netst ...
- OAuth2在微服务架构中的应用
首先是为什么要在微服务场景使用OAuth2,这是因为使用了OAuth2后,就能向第三方系统提供授权. 其次是如何使用,见下图: 在微服务架构中使用OAuth2,有几个问题需要我们思考: 1. toke ...
- opencv 图片识别
# -*- coding: utf-8 -*-"""Created on Fri Nov 22 21:35:12 2019 @author: Administrator& ...
- pandas里面过滤列出现ValueError: cannot index with vector containing NA / NaN values错误的解决方法(转)
###df_18的字段fuek是否包含 / df_18[df_18['fuel'].str.contains('/')] 报错: ValueError Traceback (most recent c ...
- html简单知识
一.html标签的特征: 1.空白折叠现象 2.对空格和换行不敏感 3.标签要严格封闭 二.p标签的嵌套 p中只能存放字体.图片.表单控件,不能放盒子标签 三.html中标签的分类 1.行内标签 在一 ...