vue--传值
传值:(如果传的是引用类型,当值发生改变时所有绑定他的全都发生改变,如果传的时值类型,就只有他自己发生改变)
父传子:
父页面:父组件定义一个属性
users:[
{name:'张三',position:'web开发'},
{name:'张三',position:'web开发'}
]
然后在当前页的子页面标签下加
<helloworld v-bind:user="users"></helloworld>
子页面:先在引入
export default{
props:['users']
}
然后就可以用v-bind:user="users"的user调用父组件的users属性了,
写法:写法就和调用当前页面的属性一样,
<ul>
<li v-for="u in user">{{u.name}},{{u.position}}</li>
</ul>
******严谨写法:props:{传进来的东西:{ type:类型,required:true }}
子传父:
需要自定义事件;子组件的点击事件:
this.$emit('titleChange(这是事件名)','这是需要传的值!');
父组件:在跟子组件对应的标签下写自定义titleChange事件,执行updateChange()方法:
<app_herder v-on:titleChange="updateChange($event)" v-bind:str="string">
</app_herder> methods:{
titleChange:function(val){
this.string=val
}
}
在子组件定义事件名和值,然后程序会跑到父组件的当前子组件标签下找定义的事件,然后再执行方法。
vue--传值的更多相关文章
- 前端实操案例丨如何实现JS向Vue传值
摘要:项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令.自定义拖拽指令规定了根据用户可以进行元素拖拽.缩放等一系列逻辑处理的动作. 本文分享自华为云社区<[ ...
- vue传值的几种方式
props:适用于 父组件 ==> 子组件 通信 由父组件传值子组件在props中接收即可: (由父组件给子组件传递 函数类型 的props可实现 子组件 ==> 父组件 传递数据,较为繁 ...
- vue 传值 概述 个人理解
1 父传子 子组件 props:[‘自定义属性名’] 父组件 v-bind:自定义属性名="值" 理解 子组件创建一个自定属性 父组件使用vue指令绑定到 自定义 ...
- 组件vue传值
<div id="app"> <hs :message="name"></hs> 用来接收值 </div> &l ...
- vue传值(小demo)
vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template> <div class="userList" ...
- vue传值(父子传值,非父子传值)
vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...
- vue传值
在vue 中组件间的传参是必不可少的,下面说下几种传参方式 1.父组件传值给子组件,首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上.然后子组件用属性props接收 2.子组件传值父组件 ...
- vue传值 ---- >> 子传父,$emit()
划重点: $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数. 子组件: 1 <template& ...
- vue传值 ---- >> 父传子,props()
父组件: 1 <template> 2 <div class="comment"> 3 <div>comment ...
- vue页面params传值的必须传name
a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...
随机推荐
- K3BOM跳层
A自制件,B自制件,C外购件 ,结构为A-B-C 如果需要跳层,则设置A-B跳层,B-C跳层,则生成A计划订单,C计划订单, 假设单独A-B跳层,则MRP运算出的结果也是A计划订单,B计划订单,C计划 ...
- python之路--MySQL多表查询
一 介绍 我们在写项目的时候一般都会建一个数据库,数据库里面会存很多的表,不可能把所有的数据都放在一张表里,因为分表来存数据节省空间,数据的组织结构更清晰,解耦和程度更高,但是这些表本质上还不是一个整 ...
- 利用 Docker 搭建单机的 Cloudera CDH 以及使用实践
想用 CDH 大礼包,于是先在 Mac 上和 Centos7.4 上分别搞个了单机的测试用.其实操作的流和使用到的命令差不多就一并说了: 首先前往官方下载包: https://www.cloudera ...
- B站弹幕姬(🐔)分析与开发(上篇)
辞职之后 休息了一段时间,最近准备开始恢复去工作的状态了,所以搞点事情来练练手.由于沉迷b站女妆大佬想做个收集弹幕的然后根据弹幕自动回复一些弹幕的东西.网上搜了一下有个c#的版本,感觉还做得不错,于是 ...
- Spring标签之Bean @Scope
@Bean 的用法 @Bean是一个方法级别上的注解,主要用在@Configuration注解的类里,也可以用在@Component注解的类里.添加的bean的id为方法名 定义bean 下面是@Co ...
- windows 10 & task view & shortcut
windows 10 & task view & shortcut Win + Tab https://blogs.windows.com/windowsexperience/2014 ...
- 一、纯css实现顶部进度条随滚动条滚动
一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- C#中decimal,double和float的区别
float 单精度浮点 32bit,double 双精度浮点64bit,decimal是高精度 128bit,浮点型.float double 是 基本类型(primitive type),decim ...
- python 基础篇
1.编程语言介绍. 1.机器语言:直接用二进制编程,直接对硬件的控制,需对硬件掌握比较深. 优点:执行效率快 缺点:开发效率低下 2.汇编语言:用英文标签代替二进制编写程序,直接对硬件的控制,需对硬件 ...
- 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\2da42acc\ab2935
未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\2da42acc\ab293 ...