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. 一个linuxk开发板的开发笔记

    arm-fsl-linux-gnueabi开发笔记 //开发主机系统信息 $ lsb_release -a No LSB modules are available. Distributor ID:U ...

  2. 杭电2024 C语言合法标识符

    链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2024 开始真的对这题是一点头绪都没有,简直了.然后事实证明是我想多了,这题主要是把概念给弄清楚 ...

  3. java记录3--异常

    异常的分类 1.Error 由java虚拟机生成并抛出,包括动态链接失败,虚拟机错误等等,JAVA程序无法对此错误 try { //可能出现异常的代码块 } catch(exception1 ) { ...

  4. IELTS Simon wr task p3

  5. 02-07Android学习进度报告七

    今天主要学习了关于Android开发的Date和Time组件部分内容. 首先看TextClock: 可以通过调用:TextClock提供的is24HourModeEnabled()方法来查看,系统是否 ...

  6. 使用mysql服务实现负载均衡

    mysql 长连接(tcp协议)模拟负载均衡 1.存在member,member的port与mysql服务port一致为3306 2.vip绑定浮动ip 3.开启mysql服务: #service m ...

  7. ch8 让div居中--使用外边距

    假设有一个布局,希望让其中的容器div在屏幕上水平居中,则只需要定义div的宽度,然后将水平外边距设置为auto <body> <div class="wrapper&qu ...

  8. 61二叉搜索树的第k个结点

    题目描述 给定一颗二叉搜索树,请找出其中的第k大的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 中,按结点数值大小顺序第三个结点的值为4. 思路:二叉搜索树的中序遍历是递增的序列,使用 ...

  9. 「JSOI2010」满汉全席

    前言 由于蒟蒻才刚开始学 \(\text{2-SAT}\),所以题解中有的地方可能不够精炼,望多包涵! 题目描述 题目意思很简单,标准的\(\text{2-SAT}\)问题模型.那么我们就先来介绍一下 ...

  10. 算法设计与分析 - AC 题目 - 第 5 弹(重复第 2 弹)

    PTA-算法设计与分析-AC原题 - 最大子列和问题 (20分) 给定K个整数组成的序列{ N1, N2, ..., NK },“连续子列”被定义为{ Ni, Ni+, ..., Nj },其中 ≤i ...