vue学习笔记(二)——字符组件传值「建议收藏」

vue学习笔记(二)——字符组件传值「建议收藏」1、子组件向父组件传值、vue中splice和$emit使用:https://blog.csdn.net/BlackPlus28/article/details/100136811<body> <div id=”app”> <!– v-model 数据双向绑定 –> …

大家好,又见面了,我是你们的朋友全栈君。

1、子组件向父组件传值、

vue中splice和$emit使用:https://blog.csdn.net/BlackPlus28/article/details/100136811

<body>
        <div id="app">
                <!--  v-model 数据双向绑定 -->
                <input type="text"  v-model="inputvalue"/>
                <!--  v-on  绑定事件 -->
                <button v-on:click="handleBtnClick">提交</button>  
                
                    <!-- 通过list循环出多少个组件,把循环出的值借助v-bind中的content传递过去 -->
                    <!-- 动态地绑定一个或多个特性,或一个组件 prop 到表达式 -->
                    <todo-item  
                        v-bind:content="item" v-for="(item,index)  in list"  v-bind:index="index"  v-on:delete="handleItemDelete" >
                    </todo-item>
                </ul>               
        </div>
        <!-- 
            删除功能
            1、当点击输出列表时,在父组件绑定事件监听器,会触发handleItemDelete函数,就会执行父组件中的handleItemDelete函数
                1.1 通过v-bind也把index(表明todo-item是第几个)传递过去,子组件想用index,就必须要在props中声明一下,父组件传递的index就会被子组件接受
                1.2 当被触发时传递delete标识,并传递参数index==》带给父组件,父组件v-on在监听===》handleItemDelete并将index传递过去
            2、点父组件监听到点击事件时就会,this.list = []; ==》 当点击列表时就会出现清空数组所有元素  当list为空时,item也就为空,页面上todo-item也就不会存在
                2.1 handleItemDelete通过alert就能接受到index下标   ===》 通过  this.list.splice(index,1); 对数据进行删除后
            v-bind===>':'   、  v-on===>'@'
            注:props是子组件访问父组件数据的唯一接口
         -->
        <script>
                // 定义局部组件,必须进行注册(把TodoItem注册到vue实例中),
            var TodoItem = {
                // 子组件想用index就必须接受这个数据
                props:['content','index'],
                template:"<li v-on:click='handleClick'>{
  
  {content}}</li>",
                methods:{
                    handleClick:function(){
                        this.$emit("delete",this.index);
                        // alert("click")
                    }
                }
            }
            //  注册组件为components
            var app = new Vue({
                    el:'#app', 
                    components: {
                        TodoItem:TodoItem
                    },
                    data:{
                       list:[],
                       inputvalue:'',
                    },
                    methods:{
                        handleBtnClick:function(){
                            this.list.push(this.inputvalue);    //  当点击之后会把inputvalue中的值进行循环遍历出
                               this.inputvalue = '';
                            // alert(this.inputvalue);   //  获取到data中的inputvalue值
                        },
                        // 当监听到这个事件之后
                        handleItemDelete:function(index){
                            // this.list = []     //  演示过程步骤
                            this.list.splice(index,1);
                                // alert(index);
                        }
                    }
                })
        </script>
</body>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147170.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 在form里面,放了四个UEditor,怎么在后台分别获取它们值

    在form里面,放了四个UEditor,怎么在后台分别获取它们值

  • 九某草 X站cms 渗透篇「建议收藏」

    九某草 X站cms 渗透篇「建议收藏」这一套源码与网上那些X站cms都是一致,那么在奇安信社区上看到了这款,那么也来玩玩,这一套源码的话基本的都是存在后台提权、存储xss、反射XSS、弱口令(至于弱口令这块一般安装后直接使用admin、admin或者某cms名称直接进行登录,那么我们登录进行也是直接忽略过爆破这一段)1、爆破篇…

    2022年10月19日
  • 网页中的表单设计(网页表单制作步骤)

    在学习了最基本的网页元素后,接触到了表单,下面是用HTML写的很基础的表单,中间设计到了一点点CSS的内容,不算复杂。<!doctypehtml><html><head><metacharset=”utf-8″><title>表单综合实例</title><styletype=”text/css”&g…

  • 基于TCP的socket编程原理概述「建议收藏」

    基于TCP的socket编程原理概述「建议收藏」解:服务器端:1)创建套接字socket;2)bind(将套接字绑定到本地地址和端口上)3)listen(将套接字设置为监听模式,准备接受连接请求)4)accept等待客户请求到来,当请求到后,接受连接请求,返回一个新的对应于此次连接的套接字5)用返回的套接字和客户端进行通信(send/receive)6)返回等待另个客户请求7)关闭套接字客户端:1)创

    2022年10月18日
  • lcd电子时钟怎么调_keil液晶显示程序

    lcd电子时钟怎么调_keil液晶显示程序第11周上机程序-LCD12864显示-操作示范结果展示取模软件软件图片软件下载百度网盘下载钉钉群下载软件使用方法(文字取模)软件使用方法(字符取模)程序修改导入原本程序修改原程序修改文字修改学号完整程序结果展示取模软件软件图片软件下载百度网盘下载链接:link.提取码:houh钉钉群下载软件使用方法(文字取模)点击C51后字符便会自动生成。保存为记事本形式,如下所示软件使用方法(字符取模)一样的操作,输入学号,生成16进制数组,保存于桌面即可。程

  • xgboost入门与实战(原理篇)

    xgboost入门与实战(原理篇)xgboost入门与实战(原理篇)前言:xgboost是大规模并行boostedtree的工具,它是目前最快最好的开源boostedtree工具包,比常见的工具包快10倍以上。在数据科学方面,有大量kaggle选手选用它进行数据挖掘比赛,其中包括两个以上kaggle比赛的夺冠方案。在工业界规模方面,xgboost的分布式版本有广泛的可移植性,支持在YARN,MPI,SungridEn

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号