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

父传子:

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

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. 剑指offer(10)

    题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 思路: 如果忽略题目中 ...

  2. github 操作

    https://www.cnblogs.com/cxk1995/p/5800196.html 1在已有的GitHub账号下创建项目. 2将GitHub项目克隆到本地.  git clone https ...

  3. CentOS7学习

    1.为什么学linux? linux开源免费,系统稳定,多用户的操作系统. linux有许多版本,各个版本之间的不同点大概分三种? > 内核不同 > 集成不同的应用 > 定制不同的图 ...

  4. GlusterFS卷的种类

    1.分布卷 在分布式卷中,文件随机扩展到卷中的砖块中. 使用分布式卷,需要扩展存储和冗余不是很重要,或由其他硬件/软件层提供. 创建语法:gluster volume create [transpor ...

  5. div中的相对定位与绝对定位

    1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动.(再一点,相对定位时,无论是否 ...

  6. maven(win10)配置完环境变量后无法识别mvn -v命令

    第一步:http://maven.apache.org/download.cgi官网下载 第二步:把压缩包解压缩到不含中文和空格的目录下 第三步:新建MAVEN_HOME环境变量,值为maven解压缩 ...

  7. python之if使用方法举例

    if使用方法举例: import random #随机生成1-100的整数 n = random.randint(1, 100) if n > 50: print(n, "> 5 ...

  8. jQuery 获取url中的参数

    //获取url中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "= ...

  9. 前端部分-CSS基础介绍

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.也就是定义相应的标签语言来定制显示样式达到一定的显示效果. 每个CSS样式由两个组成部分:选择器和 ...

  10. python--使用pymyslq操作数据库

    1.安装pymysql 在命令行内输入 pip install pymysql : 2.pycharm连接mysql 在进行本文以下内容之前需要注意: 你有一个MySQL数据库,并且已经启动. 你有可 ...