<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

    <div id="app">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="add">提交</button>
        </div>
        <ul>
            <todo-item
                v-for="(item,index) in list"
                :content="item"
                :key="index"
                :index="index"
                @delete="del"
            >
            </todo-item>
            <!-- 子组件要传递值到父组件 通过 this.$emit传递一个事件到父组件 父组件触发
            后 再触发父组件的方法，delete事件就是中间事件 handelclick子组件的点击  del父组件的点击 -->
            <!-- <li v-for="(item,index) in list" :key="index" @dblclick="handelClick"> {{ item }}</li> -->
        </ul>
    </div>
    <script>
        Vue.component('todo-item',{
            props:['content','index'],
            template:"<li @dblclick='handelClick'>{{content}}</li>",
            methods:{
                handelClick(){
                    this.$emit('delete',this.index)
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                add() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                del(index){
                    this.list.splice(index,1)
                }
            }

        })

    </script>
</body>
</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. Flutter中的Stack、Align、Positioned的使用

    import 'package:flutter/material.dart'; import 'package:flutter_testdemo001/res/listData.dart'; void ...

  2. 零基础学Python-第一章 ：Python介绍和安装-02.Python的发展历史与版本

    pthhon3.0对开发者带来了麻烦,因为2.0个3.0的程序并不是兼容的. 目前python3.0已经变成了真正的主力 官方版本和发行版 发行版会把常用的科学计算的包也给继承进来.这样就不用考虑包和 ...

  3. 【442】Remote control GUP Linux

          参考:上传文件到GPU服务器并运行文件 参考:WinSCP 参考:Python远程调试图文教程(一)之Pycharm Remote Debug 参考:教程 | 使用 PyCharm 连接服 ...

  4. CentOS7下使用Sentinel实现Redis集群高可用

    Sentinel是Redis官方提供的一种高可用方案(除了Sentinel,Redis Cluster是另一种方案),它可以自动监控Redis master/slave的运行状态,如果发现master ...

  5. Internet Download Manager 快速下载插件，破解版

    下载下来直接双击绿化按钮即可. 软件链接 : https://pan.baidu.com/s/1agK3cLtjJzXcGEgsuv5mVQ  提取码: ckm7

  6. DALFactory出现"未能加载文件或程序集“DAL”或它的某一个依赖项。系统找不到指定的文件”的解决方案 .

    自己在使用抽象工厂+配置文件+反射实现重构机房的过程中,遇到了这种情况, 当初自己认真的检查了反射中的代码,都是没有问题,请教了师姐,检查了抽象工厂与反射的使用都没有问题 // 查找我们将要使用的数据 ...

  7. node及npm安装与配置

    一,安装环境查看 软件版本选择 node 10.16.3 二,软件安装 软件下载,下载地址 https://nodejs.org/dist/ 解压安装 cp node-v10.16.3-linux-x ...

  8. RobotFramework: 获取当前时间戳

    robot中先导入DateTime库 #获取当前时间:2019-07-31 10:46:29.940 ${time} Get Current Date result_format=timestamp ...

  9. MySQL索引对NULL值的处理

    # 索引不会包含有NULL值的列 只要列中包含有NULL值都将不会被包含在索引中,复合索引中只要有一列含有NULL值,那么这一列对于此复合索引就是无效的.所以我们在数据库设计时不要让字段的默认值为NU ...

  10. WXSS选择器