1,子组件 TodoItem.vue  :

<template>
  <div class="todo-item" :class="{'is-complete':todo.completed}">
      <p>
          <input type="checkbox" @change="markComplete">
          {{todo.title}}
          <button class="del" @click="$emit('deleteItem',todo.id)">x</button>
      </p>
  </div>
</template>

2,父组件 Todos.vue :

<template>
  <div>
    <div v-for="todo in a" :key="todo.id">
      <TodoItem :todo="todo" @deleteItem="deleteItem"/>
    </div>
  </div>
</template>
<script>
import TodoItem from './TodoItem'
export default {
    name:'todos',
    data(){
      return{
        a:this.todos
      }
    },
    props:{
      todos:{
        type:Array
      }
    },    
    components:{
      TodoItem:TodoItem
    },
    methods:{
      deleteItem(id){
        console.log('id : '+id);
      }
    }
}
</script>

vue - 子组件向父组件 传递方法和参数的更多相关文章

  1. Vue子页面给父页面传递数据

    子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...

  2. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  4. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  5. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  6. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  7. vue子组件通知父组件使用方法

    vue子组件通知父组件使用方法 <template> <mt-field placeholder="验证码" v-model="getverifycod ...

  8. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  9. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  10. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

随机推荐

  1. 《Interest Rate Risk Modeling》阅读笔记——第八章:基于 LIBOR 模型用互换和利率期权进行对冲

    目录 第八章:基于 LIBOR 模型用互换和利率期权进行对冲 思维导图 推导浮息债在重置日(reset date)的价格 第八章:基于 LIBOR 模型用互换和利率期权进行对冲 思维导图 推导浮息债在 ...

  2. 275 原型与原型链:显式原型prototype ,隐式原型__proto__,隐式原型链,原型链_属性问题,给原型对象添加属性/方法

    1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2. ...

  3. 解决HTML5(富文本内容)连续数字、字母不自动换行

    最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过input展示出来(这里用到了 Vue 的 v-html 指令). 也是巧合,编辑了一个只有数字组成的长文本,等到展示的 ...

  4. .net使用rabbitmq安装操作

    自己在windows安装rabbitmq时,遇到了很多坑,最恶心的就是版本不匹配的问题,所以自己写了一篇总结,本文章安装的Erlang为8.2,rabbitmq为3.5.6 1 安装rabbitmq, ...

  5. MFC加载图片

    目录 1. 自适应方法 2. 加载原图方法 1. 自适应方法 /* 自适应方法 */ CRect rect; CRect rect1; CImage image; //创建图片类 image.Load ...

  6. 初识Python和使用Python爬虫

     一.python基础知识了解:   1.特点: Python的语言特性: Python是一门具有强类型(即变量类型是强制要求的).动态性.隐式类型(不需要做变量声明).大小写敏感(var和VAR代表 ...

  7. 浅谈脱壳中的附加数据问题(overlay)

    Author:Lenus -------------------------------------------------- 1.前言 最近,在论坛上看到很多人在弄附加数据overlay的问题,加上 ...

  8. Java 理论与实践: 哈希

    有效和正确定义hashCode()和equals() 每个Java对象都有 hashCode() 和 equals() 方法.许多类 Override 这些方法的缺省实施,以在对象实例之间提供更深层次 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:文本框(Textarea)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 【剑指Offer面试编程题】题目1368:二叉树中和为某一值的路径--九度OJ

    题目描述: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 输入: 每个测试案例包括n+1行: 第一行为2 ...