首页 > 其他分享 >Vue组件使用/单个组件的生命周期

Vue组件使用/单个组件的生命周期

时间:2024-09-24 11:13:30浏览次数:1  
标签:vue Parent List Vue 生命周期 事件 Child 组件

  • props 和 $emit
    props: 用于父组件传递data数据给子组件,比如在 index.vue中,data函数里面有个list数据,把它传给List组件(下图1),在List组件内用list属性来接收(下图2)

$emit:事件触发,在index.vue中在两个子组件内传入了两个方法:add delete。

这俩方法作为 父组件给子组件的 两个事件
在Input组件中,通过点击事件:

点击事件来触发this.$emit('add'),这里的add和父组件传给子组件的方法@add一样。

同理,在List组件中的delete删除事件也是一样。在子组件List中点击按钮,就会执行删除事件。

父到子,传递数据;子到父,触发事件。

  • ❗自定义事件(兄弟组件通信)
    import event from './event'

要实现Input.vueList.vue之间通信:在input输入内容之后点击add按钮会在控制台打印出'on add title'。打印的方法在List.vue中

标签:vue,Parent,List,Vue,生命周期,事件,Child,组件
From: https://www.cnblogs.com/gardenOfCicy/p/18428422

相关文章

  • 万象更新 Html5 - vue.js: vue 模板语法基础(MVVM, 插值, 指令等)
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-vue.js:vue模板语法基础(MVVM,插值,指令等)示例如下:vue\basic.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue模板语法基础......
  • 【开题报告】基于django+vue宿舍管理系统(论文+程序)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着高校规模的不断扩大和学生人数的持续增长,宿舍管理成为了高校日常管理中的一项重要且复杂的任务。传统的宿舍管理模式往往依赖于人工记......
  • 【JS】Object.defineProperty与Proxy的对比并通过Vue2、3的实现证明Proxy性能优于Obje
    一、Object.defineProperty这里只是简单描述,具体请看另一篇文章:Object.defineProperty。Object.defineProperty是JavaScript中用于定义或修改对象属性的功能强大的方法。它可以精确地控制属性的行为,如是否可枚举、可配置、可写等。基本用法Object.defineProperty(obj......
  • vue实现点击按钮发出警报声
    Vue的音乐文件夹叫做assets,assets文件夹在Vue项目的根目录下。assets文件夹用于存放项目中使用的静态资源文件,包括图片、音乐、视频等。在assets文件夹中,可以创建一个单独的文件夹用于存放音乐文件,命名可根据需要自定义,一般而言命名为music或audio。音频文件:在这里免费下载  h......
  • 好用的js表格组件tabulator使用
    偶然中看到了这个功能强大的表格组件,不仅支持分页、过滤、排序、树形表格等常见的功能,且支持分组显示、表格内编辑、统计计算、读本地文件、拖拽表格改变行列顺序、下载、像在excel文件中操作一样的编辑等多种功能。常用配置项及表格实例化查看代码<linkhref="../plugins/tab......
  • Vue 基本使用
    基本使用,组件使用❗必须要会!高级特性不常用,但可以体现你的知识深度Vuex和Vuerouter❗重要考察频率高面试题......
  • React的useId,现在Vue3.5终于也有了!
    前言React在很早之前的版本中加了useId,用于生成唯一ID。在Vue3.5版本中,终于也有了期待已久的useId。这篇文章来带你搞清楚useId有哪些应用场景,以及他是如何实现的。关注公众号:【前端欧阳】,给自己一个进阶vue的机会useId的作用他的作用也是生成唯一ID,同一个Vue应用里面每次调用......
  • Axure精选各类组件案例集锦:设计灵感与实战技巧
    在设计大屏页面时,设计师们面临着如何构建丰富、直观且用户友好的界面的挑战。幸运的是,Axure等强大的原型设计工具提供了丰富的可视化组件库,为设计师们提供了无限的设计灵感和实战技巧。本文将通过精选的各类组件案例,探讨大屏设计中常用组件的应用场景与设计要点。大标题:引领视觉焦......
  • Vue开发前端图片上传给java后端
    前端效果图1前端代码<template><div><!--页面标题--><h1class="page-title">图片上传演示</h1><divclass="upload-container"><!--使用van-uploader组件进行文件上传,v-model绑定fileList数据,支......
  • Hadoop三大组件之HDFS(一)
    1.HDFS的架构HDFS(HadoopDistributedFileSystem)采用主从架构,由一个NameNode(主节点)和多个DataNode(从节点)组成。NameNode负责管理数据块映射信息(如文件名、文件目录、权限、块位置等)并配置副本策略,而DataNode负责存储实际的数据块。SecondaryNameNode辅助NameNode进行元......