vue父组件传值和子组件触发父组件方法
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="test">
<li-component v-for="(item,index) in list" :title="item" v-bind:key="index" :id="index" v-on:btn="pclick"></li-component>
</div> <script>
Vue.component("li-component",{
props:['title','id'], //接收到的父组件的值
data:function(){
return {
count:0,
}
},
template:"<li v-on:click='child'>{{ title }}</li>", //子组件点击触发本组件的child方法
methods:{
child:function(){
this.$emit('btn',this.id) //btn为父组件定义的自定义事件 v-on:btn="pclick"
}
}
}) var vue = new Vue({
el:"#test",
data:{
list:[
'a','b','c','e','f','g','h'
]
},
methods:{
'pclick':function(id){
this.list.splice(id,1) //删除指定的下表元素
}
}
}) </script>
vue父组件传值和子组件触发父组件方法的更多相关文章
- iframe 父子互传消息,父页面滚动,子页面触发父页面高度
https://blog.csdn.net/qq_38366657/article/details/81538145 // 父页面的js<iframe id='TopHeader' src=&q ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- 父组件传值给子组件的v-model属性
父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...
- angular4父组件向子组件传值,子组件向父组件传值的方法
父组件向子组件传值 @Input 文件目录 父组件: father.template.html <h1>父组件</h1> <cmt-child [data]='dat ...
- js 父子标签同时设置onclick,子标签触发父标签onclick解决办法
js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...
- layui 父页面获取弹窗传递的值 和 父页面传值给子弹窗的方法
1.父页面获取子页面(弹窗)的值: 现在父页面页面加载方法中定义方法,专门用来获取从子页面的值 $(document).ready(function() { //拿到子窗口中传回的数据 functio ...
- 项目总结03:window.open()方法用于子窗口数据回调至父窗口,即子窗口操作父窗口
window.open()方法用于子窗口数据回调至父窗口,即子窗口操作父窗口 项目中经常遇到一个业务逻辑:在A窗口中打开B窗口,在B窗口中操作完以后关闭B窗口,同时自动刷新A窗口(或局部更新A窗口)( ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
随机推荐
- [Java]1.两数之和 - LeetCode
1 题目 2 思路与代码 思路一:暴力法(两层For循环) 时间复杂度:O(n^2) 对于每个元素,我们试图通过遍历数组的其余部分来寻找它所对应的目标元素,这将耗费 O(n) 的时间.因此时间复杂度为 ...
- seaborn可视化
文章来自https://blog.csdn.net/qq_33120943/article/details/76569756 详细教程可以查看官方额示例:http://seaborn.pydata.o ...
- 相机用的 SD Card 锁Lock 烂掉了,无法正常写入
没错,又碰到奇奇怪怪的SD Card Lock 烂掉了 , 无法正常写入,不要急,千万不要扔了,拿起透明胶粘在 Lock 处,注意不要粘住金手指哦,再放回去就可以读写了,但是透明胶不耐摩擦,用了几次 ...
- 【ABAP系列】SAP ABAP 字符编码与解码、Unicode
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 字符编码与解码 ...
- 深入浅出的分析 Set集合
01. 摘要 Set集合的特点主要有:元素不重复.存储无序的特点. 打开 Set 集合,主要实现类有 HashSet.LinkedHashSet .TreeSet .EnumSet( RegularE ...
- 在先电IAAS平台中,搭建先电bigdata平台
以两台节点为例来组件Hadoop分布式集群,这里采用的系统版本为Centos7,如下表所示: 主机名 内存 硬盘 IP地址 角色 master 8192MB 100G 192.168.200.131 ...
- eNSP使用-不同网段的互联
就像下面这个场景: 1.基本配置 先点击左上角的——新建 然后咱们把要用的设备都拖到面板上去 成品就是这样的: 点击这个为他们添加备注 我们来配置一下实验编址 右键单击PC1设置(PC2同理,就不多演 ...
- web漏洞
*参考网站 https://cxsecurity.com/ https://www.exploit-db.com/ https://www.seebug.org/ http://www.securit ...
- Linux用户管理重要初始化目录login
/etc/login.defs 配置文件 /etc/login.defs 文件是用来定义创建用户时需要的一些用户的配置信息.如创建用户时,是否需要家目录,UID和GID的范围,用户及密码的有效期限等 ...
- 删除重复信息且要保留一条的(roacle的rowid另类用法)
由于表的主键失效了(disable),导致导入了一些主键重复的数据,想保留唯一的一条, 最后发现其实可以用rowid来实现,不知道算不算是rowid的另类用法. delete /*+ parallel ...