vue父子组件传值例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button @click="add">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) in list"
:content="item"
:key="index"
:index="index"
@delete="del"
>
</todo-item>
<!-- 子组件要传递值到父组件 通过 this.$emit传递一个事件到父组件 父组件触发
后 再触发父组件的方法，delete事件就是中间事件 handelclick子组件的点击 del父组件的点击 -->
<!-- <li v-for="(item,index) in list" :key="index" @dblclick="handelClick"> {{ item }}</li> -->
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:"<li @dblclick='handelClick'>{{content}}</li>",
methods:{
handelClick(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#app",
data:{
inputValue:'',
list:[]
},
methods:{
add() {
this.list.push(this.inputValue)
this.inputValue = ''
},
del(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
vue父子组件传值例子的更多相关文章
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- 关于Vue父子组件传值(复杂数据类型的值)的细节点
vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
- 一个故事讲懂vue父子组件传值
作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...
- Vue 父子组件传值 props
1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...
- vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- vue 父子组件传值，兄弟组件传值
父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...
- Vue父子组件传值以及父调子方法、子调父方法
稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...
- VUE父子组件传值问题
一.父组件向子组件传递数据 组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 1.静态props ...
- vue父子组件传值
1.父组件向子组件传值 例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值, 子组件v-header内容 <temp ...
随机推荐
- Python3入门（十三）——常用内置模块之时间日期模块datatime
1.日期时间模块——datatime //其他模块例如time.calender等模块暂不展开 (1)获取当前时间:datatime.now(): from datetime import datet ...
- 【431】Prim 算法 & Kruskal 算法
Prim 算法: Minimum Spanning Tree(MST):最小生成树,就是连接所有节点的最小权值 mst集合与rest集合 mst集合中顶点,找到一条最小权值的边 然后把边相关的顶点,选 ...
- 《楞严经四种清净明诲》 (转自学佛网：http://www.xuefo.net/nr/article56/559965.html)
<楞严经四种清净明诲> 佛告阿难:“汝常闻我毗奈耶中,宣说修行三决定义.所谓摄心为戒,因戒生定,因定发慧,是则名为三无漏学. “阿难,云何摄心,我名为戒? “若诸世界六道众生其心不淫,则不 ...
- lnmp 多版本php 同时运行
首先需要装好两个版本以上的PHP(例如:php5.6和php7两个版本).这里假设你已安装完成. .配置并启动php默认版本: (设置 nginx 的 vhost 域名配置文件监听端口就好) ).打开 ...
- 页面进行ajax时 显示一个中间浮动loading
先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层. 适用于触屏和pc页面. /* 页面进行ajax时 显示一个中间浮动loading @auther ...
- 利用ldirectord实现lvs后端realserver健康状态检查
ldirectord用来实现LVS负载均衡资源在主.备节点间的故障转移.在首次启动时,ldirectord可以自动创建IPVS表.此外,它还可以监控各RealServer的运行状态,一旦发现某Real ...
- vue-cli3.0和element-ui及axios的安装使用
一.利用vue-cli3快速搭建vue项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令( ...
- mac 上更改环境变量
第一次配置Mac的环境变量,到网上转了一圈才找到正确方法. 打开终端,新建.bash_profile文件在~/目录下(如果电脑里已经有了这个文件,跳过这一步) touch ~/.bash_profil ...
- 在Ubuntu下安装qt
安装qt前的准备: 安装基础开发包,主要gcc,g++等: sudo apt-get install build-essential 1. 使用qt-opensource-linux-x86-5.5. ...
- 《ucore lab4》实验报告
资源 ucore在线实验指导书 我的ucore实验代码 练习1:分配并初始化一个进程控制块 题目 alloc_proc函数(位于kern/process/proc.c中) 负责分配并返回一个新的str ...