传值:(如果传的是引用类型,当值发生改变时所有绑定他的全都发生改变,如果传的时值类型,就只有他自己发生改变)

父传子:

父页面:父组件定义一个属性

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--传值的更多相关文章

  1. 前端实操案例丨如何实现JS向Vue传值

    摘要:项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令.自定义拖拽指令规定了根据用户可以进行元素拖拽.缩放等一系列逻辑处理的动作. 本文分享自华为云社区<[ ...

  2. vue传值的几种方式

    props:适用于 父组件 ==> 子组件 通信 由父组件传值子组件在props中接收即可: (由父组件给子组件传递 函数类型 的props可实现 子组件 ==> 父组件 传递数据,较为繁 ...

  3. vue 传值 概述 个人理解

    1 父传子   子组件  props:[‘自定义属性名’]   父组件  v-bind:自定义属性名="值"  理解 子组件创建一个自定属性   父组件使用vue指令绑定到 自定义 ...

  4. 组件vue传值

    <div id="app"> <hs :message="name"></hs> 用来接收值 </div> &l ...

  5. vue传值(小demo)

    vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template>  <div class="userList" ...

  6. vue传值(父子传值,非父子传值)

    vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...

  7. vue传值

    在vue 中组件间的传参是必不可少的,下面说下几种传参方式 1.父组件传值给子组件,首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上.然后子组件用属性props接收 2.子组件传值父组件 ...

  8. vue传值 ---- >> 子传父,$emit()

    划重点: $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数.   子组件:   1 <template& ...

  9. vue传值 ---- >> 父传子,props()

    父组件:     1 <template> 2     <div class="comment"> 3         <div>comment ...

  10. vue页面params传值的必须传name

    a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...

随机推荐

  1. 在linux上安装MySQL数据库,并简单设置用户密码,登录MySQL

    在新装的Centos系统上安装MySQL数据库. <p><a href="http://www.cnblogs.com/tijun/">提君博客原创< ...

  2. 关于 ajax

    1.type 提交类型 get /post 2.async 默认true 异步 3.cache 默认 true 读取缓存 false不读取缓存  会在请求后面 添加一个时间戳 https://www. ...

  3. python爬虫之git的使用(origin说明)

    1.首先我们回忆两个命令 #git remote add origin 远程仓库链接 #git push -u origin master 我们一起看看这个命令,git是git的一级命令,push就是 ...

  4. python之路--基础数据类型的补充与深浅copy

    一 . join的用法 lst =['吴彦祖','谢霆锋','刘德华'] s = '_'.join(lst) print(s) # 吴彦祖_谢霆锋_刘德华 # join() "*" ...

  5. elasticsearch介绍,安装,安装错误解决及相应插件安装

    一.elasticsearch介绍 1.简介(使用的是nosql,更新比mongodb慢): ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎, ...

  6. k8s使用Glusterfs动态生成pv

    一.环境介绍 [root@k8s-m ~]# cat /etc/hosts127.0.0.1 localhost localhost.localdomain localhost4 localhost4 ...

  7. rabbitmq 配置

    1, 安装 apt-get install rabbitmq-server -y 2, 打开管理页面 sudo rabbitmq-plugins enable rabbitmq_management ...

  8. LoadRunner Vuser测试脚本添加前置条件举例

    调用接口前需要先获取登陆token,放入消息头中. /* * LoadRunner Java script. (Build: 3020) * * Script Description: 接口性能测试脚 ...

  9. 各个版本spring的jar包以及源码下载地址,目前最高版本到spring4.3.8,留存备用:

    http://maven.springframework.org/release/org/springframework/spring/

  10. c++ 的绝对值函数

    添加头文件 #include <cmath> 对于整数 abs(); 对于浮点数 fabs();