vue简单的父子组件之间传值
todo-list为例子：
代码：
父传子--------------属性 v-bind
子传父--------------$emit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body> <div id="root">
<div>
<input type="text" v-model="todoValue"/>
<button @click="handleBtnClick">提交</button>
</div>
<ul>
<todo-item :content="item"
:index="index"
v-for="(item, index) in list"
@delete="handleItemDelete">
</todo-item>
</ul>
</div> <script> var TodoItem = {
props: ['content', 'index'],
template: "<li @click='handleItemClick'>{{content}}</li>",
methods: {
handleItemClick: function() {
this.$emit("delete", this.index);
}
}
} var app = new Vue({
el: "#root",
components: {
TodoItem: TodoItem
},
data: {
todoValue: "",
list: []
},
methods: {
handleBtnClick: function() {
this.list.push(this.todoValue)
this.todoValue = ""
},
handleItemDelete: function(index) {
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
vue简单的父子组件之间传值的更多相关文章
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- Vue父子，子父，非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- React学习——通过模态框中的表单，学习父子组件之间传值
import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...
- React之父子组件之间传值
1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...
- vue之props父子组件之间的谈话
眨眼就来杭州两年了,时间真快. 我们今天来说说vue的一个api---->props 首先我们先看看一个例子,是我一个项目中写的. 看到这个:有木有一点懂了.要是没懂,继续往下看 这里我们用到了 ...
- 从0开始探究vue-组件化-组件之间传值
理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
随机推荐
- 矩池云 | 神经网络图像分割：气胸X光片识别案例
在上一次肺炎X光片的预测中,我们通过神经网络来识别患者胸部的X光片,用于检测患者是否患有肺炎.这是一个典型的神经网络图像分类在医学领域中的运用. 另外,神经网络的图像分割在医学领域中也有着很重要的用作 ...
- think php 未登录，禁止访问页面 + 退出登录
1.首先在Local创建一个基类控制器 D:\PHP\phpstudy_pro\WWW\1906A\pyg>php think make:controller goods/Base --plai ...
- Django-模板布局
- Lua中如何实现类似gdb的断点调试—09支持动态添加和删除断点
前面已经支持了几种不同的方式添加断点,但是必须事先在代码中添加断点,在使用上不是那么灵活方便.本文将支持动态增删断点,只需要开一开始引入调试库即可,后续可以在调试过程中动态的添加和删除断点.事不宜迟, ...
- 微信网页JSDK接口-wx.chooseImage问题
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceTy ...
- AQS 详解之共享锁模式
概括 AQS框架数据结构是一个先进先出的双向队列,当多个线程进行竞争资源时,那些竞争失败的线程会加入到队列中.他向上层提供了很多接口,其中一个是acquireShared获取共享模式的接口.本文将会根 ...
- 韦东山 嵌入式linux教程 笔记
@ 目录 资源链接 一.常用命令 二.shell 三.如何更改PATH? 四.路径 五.vi编辑器 六.进阶命令 七.NAT配置网络 (第2篇-P34) 八.开发板挂载 Ubuntu 的 NFS 目录 ...
- sql中数据统计
今天来说一下使用sql统计数据. 用的H2数据库,用的是DBeaver连接工具.有三表,打印表PRINT_JOB,复印表COPY_JOB和扫描表SCANNER_JOB (这段可以忽略)任务是要统计相同 ...
- .NetCore(.NET6)中使用swagger和swagger版本控制
一..NET6中使用swagger swagger支持 API 自动生成同步的在线文档,下面在.NET6中引入 1.建.NET6应用并建以下控制器 /// <summary> /// 订单 ...
- 重写(Override)与重载(Overload)的区别（面试题）
概念:重写(Override):是存在子父之间的关系,子类里定义的方法与父类里定义的方法具有相同的方法名以及相同的返回值和参数类型 重写规则: 1.方法名形参列表相同: 2.访问权限,子类大于等于父类 ...