首页 > 其他分享 >vue中使用父传子和子传父

vue中使用父传子和子传父

时间:2023-03-19 22:45:36浏览次数:34  
标签:vue methods 传递数据 传父 父传子 组件

以下内容仅作为个人学习使用

1、子组件向父组件传递数据

  1. 子组件Header

绑定点击事件

image

在methods里面自定义

image

  1. 父组件

父组件使用

image

在methods里面的事件

image

2、父组件向子组件传递数据

  1. 父组件当中用法

image

  1. 子组件Header当中(通过props绑定父组件传过来的数据)

image

番外:父传子

父组件

image

子组件

image

标签:vue,methods,传递数据,传父,父传子,组件
From: https://www.cnblogs.com/Amyel/p/17234654.html

相关文章

  • Vue插件:Vue-resource github搜索示例
     1:安装插件  vue-resourcevue的插件库,在vue1.0年代使用几率很高......
  • vue实现图片隐藏
    页面效果:单击图片时图片隐藏显示背景,再次点击重新显示图片。 实现流程:第一步:创建web项目,导入vue.js 第二步:实例化vue对象,在页面中引入<script>标签,并在<script>......
  • Vue2入门之超详细教程四-数据绑定
    1、简介数据绑定分为单向数据绑定和双向数据绑定,上一章节中出现的v-bind就属于单向数据绑定。单向绑定(v-bind):数据只能从data流向页面双向绑定(v-model):数据不仅......
  • Vue axios简易封装
    1.安装axiosnpminstallaxios-g 2.创建utils文件夹,新建文件request.js对axios进行封装3.设置请求超时通过axios.defaults.timeout设置默认的请求超时时间。例......
  • SpringBoot+Vue+EasyExcel实现excel简单导入导出
    1.先导入EasyExcel依赖<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.......
  • 谈谈 Vue shallowRef 和 shallowReactive
    深层次响应式reactive和ref创建的对象都是深层次的,对象的根属性和嵌套属性都是响应式的。深层次转换是递归地转为响应式,对象里的每个属性访问都将触发代理的依赖追踪,......
  • Vuex模块式开发
    背景:2个组件:home和search,将store仓库拆分成2个小仓库,home和search两个小仓库用于管理自己模块的数据store文件夹下新建2个文件夹:home和searchhome下index.js//home模块......
  • Vue和React项目中生成唯一ID
    Vue中唯一ID生成方式React中唯一ID生成方式......
  • vue中全局过滤器
    //全局的过滤器,进行时间的格式化Vue.filter('dateFormat',function(dateStr){//根据给定的实际那字符串,得到绑定的时间vardt=newDate(dateStr)//yyy--mm--ddvar......
  • vue+element-ui刷新路由的时候保持在当前页面小技巧
    前言:很多小伙伴在练习vue项目的时候会遇到这样一个问题,就是刷新页面的时候,路由没有显示到当前页面,而是重定向回首页了,那么该怎么解决呢,就请各位小伙伴看下面的内容介绍吧......