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. Faster-RCNN Pytorch实现的minibatch包装

    实际上faster-rcnn对于输入的图片是有resize操作的,在resize的图片基础上提取feature map,而后generate一定数量的RoI. 我想首先去掉这个resize的操作,对每 ...

  2. nginx 的location的匹配顺序

    匹配规则 匹配顺序 示例 [root@python vhast]# cat test.conf server { server_name haha.com; #listen 8080; rewrite ...

  3. 对象和Map转化gongju

    package czc.superzig.modular.utils; import java.lang.reflect.Field; import java.util.HashMap; import ...

  4. Python学习笔记005

    if if     ==    : xxxx elif     : xxxx else: xxxx 输入字符串 input() 字符串转数值 int() 数值转字符串 str() 输出 print() ...

  5. python绘制疫情图

    python中进行图表绘制的库主要有两个:matplotlib 和 pyecharts, 相比较而言: matplotlib中提供了BaseMap可以用于地图的绘制,但是个人觉得其绘制的地图不太美观, ...

  6. Go语言的map

    map一般是以库的方式提供,在C++和C#和JAVA中都需要引用相应的库而Go语言不需要引入库,可以直接方便使用 定义:map是一堆键值对的未排序集合.无序 1.声明变量: map的声明基本上没有多余 ...

  7. ABC155E - Payment

    简述题意,给你一个大数,你可以选择10的次幂进行加减运算,问如何用最少的次数从0到达这个大数 考虑从这个大数到0,从最低位开始,每次都将这个位置取完,2种策略,贪心的话不好处理进位的情况,可以想到是D ...

  8. Python 基础之python运算符

    一.运算符 1.算数运算符 + - * / // % ** var1 = 5var2 = 8 #(1)  + 加res = var1 + var2print(res) # (2)  -  减res = ...

  9. 用Java打开一个网页

    BareBonesBrowserLaunch.java 从网上无意间看到的一个工具类,意思是打开一个URL,在不同的操作系统都通用. 1.使用 很简单: String url = "http ...

  10. 【快学springboot】6.WebMvcConfigurer配置静态资源和解决跨域

    勘误 有个朋友说:为什么我配置了WebMvcConfigurer,静态资源static依然能访问?! 这里是本人的失误,我在启动类中添加了EnableWebMvc注解(文章里却没有提及,最好的做法是放 ...