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

父传子:

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

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. 重构客户注册-基于ActiveMQ实现短信验证码生产者

    重构目标:将bos_fore项目中的CustomerAction作为短信消息生产者,将消息发给ActiveMQ,创建一个单独的SMS项目,作为短信息的消费者,从ActiveMQ获取短信消息,调用第三方 ...

  2. clone内容包含select2

    如果克隆的内容包含select2,克隆之后要先删除select之后自动生成的span,再对select2进行初始化,生成新的元素.

  3. Appscanner实验还原code3

    # Author: Baozi #-*- codeing:utf-8 -*- import _pickle as pickle from sklearn import ensemble import ...

  4. admin快速搭建后台管理系统

    一.基于admin后台管理系统的特点: 权限管理:权限管理是后台管理系统必不可少的部分,拥有权限管理,可以赋予用户增删改查表权限(可以分别赋予用户对不同的表有不同的操作权限): 前端样式少:后台管理主 ...

  5. shell中数组及其相关操作

    转载 https://blog.csdn.net/jerry_1126/article/details/52027539

  6. Yii2上传图片插件使用

    例子: 1.在表单中: <?php $form = \yii\widgets\ActiveForm::begin([ 'options'=>[ 'class' => 'form-ho ...

  7. Laravel从入门到精通

    1. Laravel框架的下载安装 例如: 在D:\test\laravel目录下新建一个目录为test_laravel 第一步,下载laravel框架 在D:\test\laravel\test_l ...

  8. C-Lodop设置页面一加载就打印

    C-Lodop由于是服务不是np插件,调用打印语句(print或preview等)时机太早,在页面第一次加载完成后有几百毫秒时间等待WebSocket通讯服务准备完成,在没完成的时候会提示“C-Lod ...

  9. Spring Boot 构建电商基础秒杀项目 (十二) 总结 (完结)

    SpringBoot构建电商基础秒杀项目 学习笔记 系统架构 存在问题 如何发现容量问题 如何使得系统水平扩展 查询效率低下 活动开始前页面被疯狂刷新 库存行锁问题 下单操作步骤多,缓慢 浪涌流量如何 ...

  10. Using MongoDB with Web API and ASP.NET Core

    MongoDB is a NoSQL document-oriented database that allows you to define JSON based documents which a ...