父组件通过属性,传值给子组件,子组件通过,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. Jsp实现在线作业提交系统

    Jsp实现在线作业提交系统 作为 Computer Science 的学生,凌晨四点之前睡都应该感到羞耻. 项目托管地址:https://github.com/four-in-the-morning/ ...

  2. [连载]Tutorial series: learning how to write a 3D soft engine from scratch in C#, TypeScript or JavaScript[英]

    MSDN中的一篇博文链接:Tutorial series: learning how to write a 3D soft engine from scratch in C#, TypeScript ...

  3. 《关于ES6的学习》

    var JavaScript中,我们通常说的作用域是函数作用域,使用var声明的变量,无论是在代码的哪个地方声明的,都会提升到当前作用域的最顶部,这种行为叫做变量提升(Hoisting) 也就是说,如 ...

  4. 51 Nod 1107 斜率小于0的连线数量 (转换为归并求逆序数或者直接树状数组,超级详细题解!!!)

    1107 斜率小于0的连线数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题   二维平面上N个点之间共有C(n,2)条连线.求这C(n,2)条线中斜率小于0的线 ...

  5. 树莓派 log 日志 打印到 TXT

    #include<stdio.h> #include <stdarg.h> #include <unistd.h> #include <stdint.h> ...

  6. Putty等工具中解决SSH连接超时断开的问题

    转自:http://www.putty.ws/putty-chaoshi 1 在 linux下的ssh命令:vim /etc/ssh/ssh_config 然后找到里面的ServerAliveInte ...

  7. C++中的随机函数

    一.random函数不是ANSI C标准,不能在gcc,vc等编译器下编译通过. 可改用C++下的rand函数来实现.      1.C++标准函数库提供一随机数生成器rand,返回0-RAND_MA ...

  8. Mysql 5.7 windows安装 zip安装

    最近想安装一个本地数据库, 发现网上写的没一个能安装成功的, 各种蛋疼, 我还是自己写一个吧 参考链接: https://www.cnblogs.com/by330326/p/5608290.html ...

  9. 关于java8(Stream)的一些用法

    如果要处理int[] 转换成 List<Integer>这种形式的,可以用下面这个方法: List<Integer> orgIds = Arrays.stream(reqVo. ...

  10. [笔记] Delphi 10.2.1 Tokyo 安装使用笔记

    Android 平台: ListView 滑动速度已有改善,但比起 Berlin 还是略慢一些(在较慢的机子可感觉的到)仅于 Android 平台,其它平台没差. TMemo, TEdit 输入文字的 ...