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. redhat 7.6 流量监控命令、软件(2) iftop 监控网络IP实时流量

    1.安装iftop,先要安装flex.bison.libpcap编译安装 解压红箭头的两个文件 tar  -zxvpf  iftop-0.16.tar.gz tar  -zxvpf   libpcap ...

  2. Python 爬取 热词并进行分类数据分析-[JSP演示+页面跳转]

    日期:2020.02.03 博客期:142 星期一 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入] c.[拓扑 ...

  3. Django中defer和only区别

    defer('id', 'name'):取出对象,字段除了id和name都有 only('id', 'name'):取出对象, 只有id和name ret=models.Author.objects. ...

  4. springdata框架

    SpringData jpa:    JPA(Java Persistence API)是当年的 Sun 官方提出的 Java 持久化规范.    Spring Data JPA 是 Spring 基 ...

  5. Struts2学习(五)

    表达式 1.表达式语言 ( Expression Language )2.表达式的本质:  就是 按照某种规则 书写的 字符串3.表达式的处理: 一定有一套程序 对 表达式 中的 字符串进行解析和处理 ...

  6. PCSearch需要管理员权限,开机自启

    1.添加Windows服务,并设为自动启动: 2.通过服务启动AutoStartSevice.exe,通过AutoStartSevice.exe运行AutoStart.bat,通过AutoStart. ...

  7. Linux命令:ping命令

    ping命令:类似于windows的ping命令,用于测试网络主机ICMP请求回应的 ping选项 ping -c  #             # 执行次数 -w #             #测试 ...

  8. Reversing-x64Elf-100----攻防世界

    题目来源:攻防世界 环境:win10 软件:pycharm.64位的ida 常规的操作ida打开查看,看到了main函数,

  9. OBST(最优二叉搜索树)

    简述一下问题:假设有一颗词典二叉树,我们从中查找需要的单词,使用红黑树或平衡树这样的数据结构总是可以在O(lgN)时间内进行查找,但单词的出现频率是不同的,我们给每个单词加上一个搜索概率,然后通过这些 ...

  10. 通过Java读取xml文件内容

    读取XML中的内容就需要对XML进行解析,目前对XML进行解析的方法分为四种: 下面解析的方法是DOM4J,需要下载jar包dom4j:https://dom4j.github.io/ package ...