1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>vue 入门</title>
  8.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9.  
  10. </head>
  11. <body>
  12.  
  13.     <div id="app">
  14.         <div>
  15.             <input type="text" v-model="inputValue">
  16.             <button @click="add">提交</button>
  17.         </div>
  18.         <ul>
  19.             <todo-item
  20.                 v-for="(item,index) in list"
  21.                 :content="item"
  22.                 :key="index"
  23.                 :index="index"
  24.                 @delete="del"
  25.             >
  26.             </todo-item>
  27.             <!-- 子组件要传递值到父组件 通过 this.$emit传递一个事件到父组件 父组件触发
  28.             后 再触发父组件的方法，delete事件就是中间事件 handelclick子组件的点击  del父组件的点击 -->
  29.             <!-- <li v-for="(item,index) in list" :key="index" @dblclick="handelClick"> {{ item }}</li> -->
  30.         </ul>
  31.     </div>
  32.     <script>
  33.         Vue.component('todo-item',{
  34.             props:['content','index'],
  35.             template:"<li @dblclick='handelClick'>{{content}}</li>",
  36.             methods:{
  37.                 handelClick(){
  38.                     this.$emit('delete',this.index)
  39.                 }
  40.             }
  41.         })
  42.  
  43.         new Vue({
  44.             el:"#app",
  45.             data:{
  46.                 inputValue:'',
  47.                 list:[]
  48.             },
  49.             methods:{
  50.                 add() {
  51.                     this.list.push(this.inputValue)
  52.                     this.inputValue = ''
  53.                 },
  54.                 del(index){
  55.                     this.list.splice(index,1)
  56.                 }
  57.             }
  58.  
  59.         })
  60.  
  61.     </script>
  62. </body>
  63. </html>

vue父子组件传值例子的更多相关文章

  1. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  2. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  3. 一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

  4. Vue 父子组件传值 props

    1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...

  5. vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  6. vue 父子组件传值，兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

  7. Vue父子组件传值以及父调子方法、子调父方法

    稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...

  8. VUE父子组件传值问题

    一.父组件向子组件传递数据 组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 1.静态props ...

  9. vue父子组件传值

    1.父组件向子组件传值 例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值, 子组件v-header内容 <temp ...

随机推荐

  1. bat批处理文件怎么将路径添加到path环境变量中

    bat批处理文件怎么将路径添加到path环境变量中 摘自:https://zhidao.baidu.com/question/1887763143433391788.html 永久性的: @echo ...

  2. Laya的屏幕适配，UI组件适配

    参考: 屏幕适配API概述 版本2.1.1.1 目录 一 适配模式 二 UI组件适配 一 适配模式 基本和白鹭的适配模式一样. Laya官方也推荐了竖屏使用fiexedwidth,横屏使用fixedh ...

  3. web端自动化——selenium3+Python3+pycharm自动化

    1.前言: 对于初学者来说,python自带的IDLE,精简又方便,不过一个好的编辑器能让python编码变得更方便,更加优美些. 不过呢,也可以自己去下载其他更好用的代码编辑器,在这推荐: PyCh ...

  4. Nginx虚拟目录（alias）和根目录（root）

    功能要求: 假设nginx配置的域名是www.kazihuo.com,现有静态资源/home/www/oye目录需要通过nginx访问. 功能实现: 前提要求: 1.在nginx.conf中到处第二行 ...

  5. 【Tools】三款笔记本电脑硬件检测工具-官网下载

    一.CPU-Z 下载地址: https://www.cpuid.com/softwares/cpu-z.html 描述: CPU-Z已经是大名鼎鼎了.这里就不多说了.  二.Cinebench   下 ...

  6. Docker快速安装

    目前装Docker得最简单方式就是脚本安装了,方法如下: curl -fsSL https://get.docker.com -o get-docker.sh sh get-docker.sh 安装后 ...

  7. IP通信学习心得03

    三.TCP.三次握手.四次挥手 1.TCP数据包结构 注: A:序列号字段是所发字节的第一个字节的序号. B:报头最大长度为60个字节(4bits),最小为20个字节. C:  发送窗口由接收窗口决定 ...

  8. 微信开发核心AccessToken实现

    Common <?php namespace Proxy\Action; use Think\Action; use Vendor\Func\Red; class CommonAction ex ...

  9. [转帖]Hive学习之路 （一）Hive初识

    Hive学习之路 (一)Hive初识 https://www.cnblogs.com/qingyunzong/p/8707885.html 讨论QQ:1586558083 目录 Hive 简介 什么是 ...

  10. java当中JDBC当中Scrollable和Updatable ResultSet的用法和Helloworld例子

    [学习笔记] 在前面的jdbc的Helloworld程序当中,我们接触了最简单的 Statement.那种Statement的光标只能向前移.意思就是访问完2,只能继续访问3,不能再回过头来访问1.还 ...