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

父传子:

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

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. [转帖]Kerberos和NTLM - SQL Server

    Kerberos和NTLM - SQL Server https://www.cnblogs.com/dreamer-fish/p/3458425.html 当我们使用Windows Authenti ...

  2. [转帖]利用hydra(九头蛇)暴力破解内网windows登录密码

    利用hydra(九头蛇)暴力破解内网windows登录密码 https://blog.csdn.net/weixin_37361758/article/details/77939070 尝试了下 能够 ...

  3. ZJU_1145 OR POJ_1100 Dreisam Equations

    Dreisam Equations { 两个网站的题有点不一样(ZJH有特判)POJ时间卡得紧,建议去POJ过 } 题目大意: 给你一个字符串:是一个等式,等式左边是一个数,右边由若干个数和()构成, ...

  4. postgreSQL使用杂谈

    由于当时是在美国安装的postgreSQL ,导致回到上海后使用时,发现时间数据显示不正确. To acomplish the timezone change in Postgres 9.6 you ...

  5. Dart语法基础

    hello world // Define a function. printNumber(num aNumber) { print('The number is $aNumber.'); // Pr ...

  6. MySQL索引管理及执行计划

    一.索引介绍 二.explain详解 三.建立索引的原则(规范)

  7. 关于idea easyui 引入css js

    1.引用官方网站 <link rel="stylesheet" type="text/css" href="http://www.w3cscho ...

  8. 文件上传.ashx

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Runtime ...

  9. codeforces618B

    Guess the Permutation CodeForces - 618B Bob has a permutation of integers from 1 to n. Denote this p ...

  10. C#使用读写锁解决多线程并发写入文件时线程同步的问题

    读写锁是以 ReaderWriterLockSlim 对象作为锁管理资源的,不同的 ReaderWriterLockSlim 对象中锁定同一个文件也会被视为不同的锁进行管理,这种差异可能会再次导致文件 ...