vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值。
HTML部分:
<div id="app">
<tmp1 :parentData="data"></tmp1>
</div>
JS部分:
var app = new Vue({
el: "#app",
data: {
componentName: "login",
data:"这是父组件的数据"
},
methods: { },
components:{
"tmp1":{
data(){
// data 里的数据是组件私有的,并不是通过父组件传过来的
return {
title:"标题",
content:"内容",
// 如果父组件传值的变量名称 和 data 中的重名了 会报错
// parentdata:"子组件也有 parentdata 名的数据怎么办?"
}
},
// 如果想接受父组件传过来的数据,先在 props 数组里面定义一下该属性
props:["parentdata"],
template:"<h3>子组件--{{ parentdata }}</h3>",
}
}
});
注意:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
vue 组件-父组件传值给子组件的更多相关文章
- vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数
父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...
- 在父组件中,传值给子组件-vue
1.通过 props <x-test :name="username"></x-test>1)props为字符串数组 props: ['name']2)pr ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue 父组件动态传值至子组件
1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...
- 父组件传值给子组件的v-model属性
父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
随机推荐
- 第二部分 OpenStack安装与配置
第二部分 OpenStack安装与配置 一.引言 本章内容讲解如何在3台物理机上搭建最小化云平台,这3台机器分为称为Server1.Server2和Client1,之后的各章也是如此.Server ...
- iOS 基础函数解析 - Foundation Functions Reference
iOS 基础函数解析 - Foundation Functions Reference 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名- ...
- 「iOS」你会用几种方法实现计时器
1.NSTimer 存在一定的误差,不管是一次性的还是周期性的timer得实际触发事件的时间,都会与所加入的runloop和runloopMode有关,如果此runloop正在执行一个连续性的运算,t ...
- Java开发工程师基础Math,Random,Scanner类的使用
Math类的使用(重点) (1)数学操作类:该类没有构造函数,方法均为静态的 (2)掌握内容 A:成员变量 **E:比任何其他值都更接近e(即自然对数的底数)的double值. **PI:比任何其他值 ...
- ubuntu16.04编译安装opencv3.4.6
1.下载压缩包:https://github.com/opencv/opencv,在Branch栏选择3.4版本,clone下载 2.安装cmake及依赖库,打开终端,输入以下命令: sudo apt ...
- Git知多少!!!
第一次写博客,内心有点小激动呀!首先祝大家圣诞快乐~~啦啦啦~~好了,我要步入正题啦!今天是上班第二周,终于开始写需求啦!开森~~撒花~~ 来这里第一个要学的就是git的操作啦!入职第一天发了一个大大 ...
- TIDB数据集群部署
TIDB 数据库集群 一.TiDB数据介绍 1.1.TiDB数据简介 TiDB 是 PingCAP 公司设计的开源分布式 HTAP (Hybrid Transactional and Analytic ...
- 关于IRAM和IFLASH启动模式,重映射remap 整理中
工程基于NXP LPC2468 1 为什么试用IRAM MODE 2 设置Program algorithm 编程算法的作用是什么 3 IRAM和FLASH 模式下IROM和IRAM的地址为什么不一样 ...
- 20155238 2016-2017-2 《Java程序设计》第三周学习总结
教材学习内容总结 类定义使用class关键词,名称使用Cloths,建立实例运用New关键词 Clothes c1 = new Clothes(); = :制定参考名称参考某个对象 == :比较参考名 ...
- ubuntu 装 mysql
sudo apt-get install mysql-server mysql-client