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简单的父子组件之间传值的更多相关文章

  1. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  2. Vue父子，子父，非父子组件之间传值

    Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...

  3. React学习——通过模态框中的表单，学习父子组件之间传值

    import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...

  4. React之父子组件之间传值

    1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...

  5. vue之props父子组件之间的谈话

    眨眼就来杭州两年了,时间真快. 我们今天来说说vue的一个api---->props 首先我们先看看一个例子,是我一个项目中写的. 看到这个:有木有一点懂了.要是没懂,继续往下看 这里我们用到了 ...

  6. 从0开始探究vue-组件化-组件之间传值

    理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...

  7. 浅谈vue父子组件之间的传值

    前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...

  8. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  9. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

随机推荐

  1. https 加密原理

    转载于 https://www.cnblogs.com/imteck4713/p/12016313.html 补充: <图解HTTP> 1.引言 随着互联网安全意识的普遍提高,对安全要求稍 ...

  2. MM32F0020 UART1空闲中断接收

    目录: 1.MM32F0020简介 2.初始化MM32F0020 UART1空闲中断和NVIC中断 3.编写MM32F0020 UART1中断接收和空闲中断函数 4.编写MM32F0020 UART1 ...

  3. CF877F题解

    题目大意 有一个序列,每个位置上有 \(1\) 或 \(2\) 两种元素若干,每次询问一个区间,求这个区间有多少个子区间满足 \(1\) 类元素恰好比 \(2\) 类元素多 \(k\) 个. 莫队 要 ...

  4. 想了解 spring-cloud-kubernetes，那就先来实战一把官方demo

    摘要:官方提供了简单的demo用于快速了解spring-cloud-kubernetes,我们就来一起将此demo源码编译构建,然后在kubernetes环境运行. 本文分享自华为云社区<spr ...

  5. FatFs知识点总结[多篇转载]

    一.实用简单的fatfs基础知识点总结: https://my.oschina.net/u/274829/blog/282135 二.深入点的FAT表解析: http://blog.chinaunix ...

  6. 磁盘管理--如何在VMware上给centos7增加一块磁盘

    一. 实验环境 VMware Workstaion + Centos7 二.实验步骤 1.关闭虚拟机,添加磁盘 2.添加硬件向导 硬件类型 你要安装哪类硬件? 点击完成观察到已经成功添加磁盘 3.开启 ...

  7. J20航模遥控器开源项目系列教程（七）PPM输出 | 关于按键版本和旋转编码器版本的兼容说明、布局建议 | 关于MINI版PCB的兼容说明

    我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/J ...

  8. Apache+tomcat实现应用服务器集群

    Ngnix/Apache比较 Nginx:Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力 ...

  9. Python 中 PyQt5 库语法（一）

    目录 PyQt5库(一) 一. 简介 1. 什么是 Qt 2. 什么是PyQt 3. 环境搭建 二. 基本结构 1. 第一个程序 2. 控件操作 3. 快速生成代码 4. 面向对象 三. 基类控件 1 ...

  10. RocketMQ下载安装

    windows下RocketMQ下载安装教程   一.下载 1.官网下载:http://rocketmq.apache.org/dowloading/releases/ 2.百度网盘下载:https: ...