父组件通过属性,传值给子组件,子组件通过,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 组件-父组件传值给子组件的更多相关文章

  1. vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数

    父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...

  2. 在父组件中,传值给子组件-vue

    1.通过 props <x-test :name="username"></x-test>1)props为字符串数组 props: ['name']2)pr ...

  3. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  4. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  5. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  6. vue 父组件动态传值至子组件

    1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...

  7. 父组件传值给子组件的v-model属性

    父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...

  8. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  9. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

随机推荐

  1. 第二部分 OpenStack安装与配置

    第二部分 OpenStack安装与配置 一.引言   本章内容讲解如何在3台物理机上搭建最小化云平台,这3台机器分为称为Server1.Server2和Client1,之后的各章也是如此.Server ...

  2. iOS 基础函数解析 - Foundation Functions Reference

    iOS 基础函数解析 - Foundation Functions Reference 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名- ...

  3. 「iOS」你会用几种方法实现计时器

    1.NSTimer 存在一定的误差,不管是一次性的还是周期性的timer得实际触发事件的时间,都会与所加入的runloop和runloopMode有关,如果此runloop正在执行一个连续性的运算,t ...

  4. Java开发工程师基础Math,Random,Scanner类的使用

    Math类的使用(重点) (1)数学操作类:该类没有构造函数,方法均为静态的 (2)掌握内容 A:成员变量 **E:比任何其他值都更接近e(即自然对数的底数)的double值. **PI:比任何其他值 ...

  5. ubuntu16.04编译安装opencv3.4.6

    1.下载压缩包:https://github.com/opencv/opencv,在Branch栏选择3.4版本,clone下载 2.安装cmake及依赖库,打开终端,输入以下命令: sudo apt ...

  6. Git知多少!!!

    第一次写博客,内心有点小激动呀!首先祝大家圣诞快乐~~啦啦啦~~好了,我要步入正题啦!今天是上班第二周,终于开始写需求啦!开森~~撒花~~ 来这里第一个要学的就是git的操作啦!入职第一天发了一个大大 ...

  7. TIDB数据集群部署

    TIDB 数据库集群 一.TiDB数据介绍 1.1.TiDB数据简介 TiDB 是 PingCAP 公司设计的开源分布式 HTAP (Hybrid Transactional and Analytic ...

  8. 关于IRAM和IFLASH启动模式,重映射remap 整理中

    工程基于NXP LPC2468 1 为什么试用IRAM MODE 2 设置Program algorithm 编程算法的作用是什么 3 IRAM和FLASH 模式下IROM和IRAM的地址为什么不一样 ...

  9. 20155238 2016-2017-2 《Java程序设计》第三周学习总结

    教材学习内容总结 类定义使用class关键词,名称使用Cloths,建立实例运用New关键词 Clothes c1 = new Clothes(); = :制定参考名称参考某个对象 == :比较参考名 ...

  10. ubuntu 装 mysql

    sudo apt-get install mysql-server mysql-client