vue中父子组件的参数传递和应用示例
1.在父组件中调用子组件,父亲传值给子组件
子组件如下,把要传给给父亲的值放在props中
template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li v-for="(item,index) in liAry" :class="index==licurrent?'active':''"> <router-link :to="item.linkURl"> <span class="flex alignc flexdc"> <img :src="index==licurrent?require('../../' + item.urlActive):require('../../' + item.url)" class="img1" ><span>{{item.title}}</span> </span> </router-link> </li> </ul> </div> </template> <script> export default { name: 'Bottom', data () { return { } }, props:['liAry','licurrent'], methods: { } } </script> <style scoped> @import "../../assets/public/css/top.css"; @import "../../assets/public/css/bottom.css"; </style>
父组件的调用的三部曲
首先引入子组件
import Bottom from '@/components/public/Bottom';
注入组件在components中注入
components: {Bottom}
在父亲中应用
<template> <Bottom v-bind:liAry='lidata' v-bind:licurrent='guidecurrent'></Bottom> </template>
到这里就结束了,是不是贼快
2.子组件传值给父组件
父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。
<!-- 父组件 --> <template> <div class="test"> <test-com @childFn="parentFn"></test-com> <br/> 子组件传来的值 : {{message}} </div> </template> <script> export default { // ... data: { message: '' }, methods: { parentFn(payload) { this.message = payload; } } } </script>
子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件
<!-- 子组件 --> <template> <div class="testCom"> <input type="text" v-model="message" /> <button @click="click">Send</button> </div> </template> <script> export default { // ... data() { return { // 默认 message: '我是来自子组件的消息' } }, methods: { click() { this.$emit('childFn', this.message); } } } </script>
在子组件向父亲传值的时候,不可用router-link,不然接受不到父亲定义的函数
以上就是vue中父子组件的参数传递和应用示例的详细内容,更多关于vue中父子组件的参数传递的资料请关注我们其它相关文章!
相关推荐
-
简单了解vue中父子组件如何相互传递值(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例--用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) 这里以root为挂载点,root里包含的所有内容可称为模板,即我们常说的父组件 子组件:用Vue.component()注册的组件(下图todo-item就是组件的名称,该名称可自定义,推荐使用短横线分隔命名) 定义组件名的2种方式(截图截自vue官网) 注:建议在html中引用组件时(非字符串模板),
-
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父
-
详解vue父子组件关于模态框状态的绑定方案
日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div class="page-xxx"> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</button> //点击打开详情弹窗 <button>详情</button> <Add :showAdd="false">
-
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)
-
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组
-
Vue中父子组件的值传递与方法传递
一.Vue中父组件向子组件传值 利用v-bind向子组件传值,子组件中利用props接受 <div id="app"> <father></father> </div> <template id="father"> <div> <!--注意点: 组件是可以使用自己的数据的--> <p>{{name}}</p> <p>{{age}}</p>
-
vue父子组件间引用之$parent、$children
vue中提到[父子组件],则一定会想到我们常用的父子组件通信:props+$on().$emit() ,如图: 也就是说,虽然在一般情况下,子组件是不能引用父组件或者Vue实例的数据,但是对于在开发中出现的"数据需要在组件中来回传递",我们最简单的解决办法就是通过props(和v-on)将数据从父组件传到子组件,再用$emit将数据从子组件传到父组件,以此循环引用. 但是在另一些场景下,我们可能想要比如(在父组件中)拿到子组件对象,然后直接操作其中数据,去实现一些功能,比如方法的调用.
-
Vue父子组件传值的一些坑
在用 Vue 的父子组件传值时遇到一个冷门的问题,子组件改变值后父组件的值也随之改变了,特此记录下原因和解决方式. 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点. 1. 问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使用得比较简单,一般不会遇到. 2. 原因剖析 核心:双向绑定 父子组件传值的时候涉及双向绑定,当传值为 object 类型时,传值之后数据源会被改变. 深拷贝与浅拷贝 下文详细讲. 3. 解决方
-
Vue 使用Props属性实现父子组件的动态传值详解
如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo
-
vue中父子组件的参数传递和应用示例
1.在父组件中调用子组件,父亲传值给子组件 子组件如下,把要传给给父亲的值放在props中 template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li v-for="(item,index) in liAry" :class="index==licurrent?'active':''"> <
-
vue中父子组件注意事项,传值及slot应用技巧
一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod
-
Vue中父子组件通讯之todolist组件功能开发
一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list
-
Vue中父子组件通信与事件触发的深入讲解
目录 一.组件 子组件 父组件 二.父子组件通信 父组件给子组件通信 子组件向父组件通信 三.父子组件事件触发 父组件调用子组件中的事件方法 子组件调用父组件中的事件方法 四.总结 一.组件 子组件 <template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</
-
Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备技能.而且在面试当中也往往会问到关于 Vue 方面的各种问题,其中大部分面试官会问到如上这种问题. 最近一直在做 Vue项目代码层面上的优化,说实话,优化别人的代码真是件痛苦的事情,功能实现尚且不说,就说代码规范我就能再写出一篇文章来.真的是无规范不成方圆,规范这个东西太重要了!有点扯了,回到主题,咳
-
如何用Vue实现父子组件通信
一.父子组件的关系构成 本篇文章将要总结的是Vue中父子组件之间的通信方式. 那在vue中父子组件之间的关系是怎么构成的呢,或者说哪个组件可以称为是父组件,哪个组件又可以称为是子组件呢. 在我的理解中,父子组件的关系构成也比较简单. 使用vue-cli工具构建的项目中,我们经常会在一个组件中注册引用另外一个组件. Home.vue <template> <div class="home"> <p>这里是Home组件</p> </di
-
Vue中父组件向子组件传递数据的几种方法
最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法. 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or
随机推荐
- DB2 9(Viper)快速入门
- 怎样通过iisapp命令查找pid来解决IIS的cpu占用率过高问题
- Windows上使用virtualenv搭建Python+Flask开发环境
- 屏蔽相应键盘按钮操作
- JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
- 在Firefox下js select标签点击无法弹出
- .net 日志系统解析
- 奉献出一个封装的curl函数 便于调用(抓数据专用)
- Python创建文件和追加文件内容实例
- Python使用win32com实现的模拟浏览器功能示例
- 基于MySQL Master Slave同步配置的操作详解
- 比较详细的MySQL字段类型说明
- 在Python中使用PIL模块处理图像的教程
- SQL Server 2005/2008 用户数据库文件默认路径和默认备份路径修改方法
- js操作table示例(个人心得)
- EditPlus注册码生成器(js代码实现)
- centos 7中设置tomcat 7为系统服务的方法详解
- Android实现点击缩略图放大效果
- C#中如何执行存储过程方法
- 挑战传统网络 200Mbps电源在线网现身
其他
- vue 给button绑定事件不触发
- 缺失值处理方法python
- jupyter运行代码没有反应
- 面向对象的开闭原则画图举例
- android 气泡
- vue刷新页面 怎么保留数据
- 三台2008r2怎么做负载均衡
- 小程序上下滚动选项卡
- Python删除多余空格只留一个
- pandas 部分字符串颜色
- redis做缓存前端请求
- 用PSO算法求解二元函数最大值python
- reduce 处理树形结构
- sqlserver执行任务提示22022
- mybatis根据条件选择更新
- NativeSqlQuery 注解设置返回类
- vscode c include 爆红
- java 连接hbase 序列化
- jsp输出斐波那契数列
- sql server 计划任务失败