【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件
开始
Vue组件是学习Vue框架最比较难的部分，而这部分难点我认为可以分为三个部分学习，即
所以将用三篇博客分别进行介绍以上三种情况和使用
Vue的设计者对组件的理解
Vue的设计者，对组件和父组件之间的关系流上做了阐述，即单向数据流图：父组件向子组件传递数据，子组件回馈事件
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
父组件挂载的实例
上文提到的三篇文章，都使用一个父组件挂载对象，内容比较长(可以选择不看，直接看props的使用)，感兴趣可以到git上去看源代码
模版：
<body>
<div id="el-component-id"></div>
<body
Vue实例：
var vm = new Vue({
el: "#el-component-id",
data: {
welcome: "welcome to Vue",
parentMessage: "this is parent message",
iMessage: "",
person: {
name: "小明",
from: "江苏",
to: "江西",
purpose: "喝一杯牛奶"
},
persons: 10,
sumOfTotal: 0,
nativeSumOfTotal: 0,
food: "牛肉",
languages: ["英语", "中文", "希腊语", "法语", "俄罗斯语"],
dynamicComponent: "AppHeader"
},
methods: {
incrementWithTotal: function() {
this.sumOfTotal = this.sumOfTotal + 1;
},
nativeDoThing: function() {
this.nativeSumOfTotal += 1;
},
changeCurrentComponent: function() {
let components = ["AppHeader", "AppFooter", "AppMain"];
let idx = components.indexOf(this.dynamicComponent);
if (idx == 2 || idx == -1) {
idx = 0;
} else {
++idx;
}
this.dynamicComponent = components[idx];
}
},
components: {
AppHeader: {
props: ["initialText"],
template: "<div><strong>{{title}}</strong></div>",
data: function() {
return {
title: this.initialText
}
}
},
AppFooter: {
props: ["initialText"],
template: "<div><sub>{{footerTitle}}</sub></div>",
data: function() {
return {
footerTitle: this.initialText
}
}
},
AppMain: {
props: ["initialText"],
template: "<div style='color:blue;'>{{mainContent}}</div>",
data: function() {
return {
mainContent: this.initialText
}
}
}
}
});
1. props传递单个参数
组件定义：
// 使用props数组的形式进行传递参数
Vue.component("component-span-child-1", {
props: ["message"],
template: "<span>{{message}}</span>"
})
模版中进行传值：
<div>
<h4>组件一-props传递单个参数</h4>
// 字面量传值
<component-span-child-1 message="component-style-one"></component-span-child-1>
<br />
// 绑定父组件对象实例属性 v-bind:someProperty简写为:someProperty
<component-span-child-1 :message="parentMessage"></component-span-child-1>
<br />
<component-span-child-1 v-bind:message="parentMessage"></component-span-child-1>
<br />
<input v-model="iMessage" placeholder="请输入值"/>
<component-span-child-1 :message="iMessage"></component-span-child-1>
</div>
2. props传递多个参数
组件定义：
Vue.component("component-span-child-2", {
props: ["name", "from", "to", "purpose"],
template: "<div><span>{{name}}从{{from}}到{{to}}，{{purpose}}</span></div>"
})
模版中传值：
<div>
<h4>组件二-props传递多个参数</h4>
// 字面量传值
<component-span-child-2 name="小李" from="南京" to="北京" purpose="去买个书包"></component-span-child-2>
// 父组件实例对象属性传值
<component-span-child-2 :name="person.name" :from="person.from" :to="person.to" :purpose="person.purpose"></component-span-child-2>
</div>
3. 使用props对象高级传参，并对参数进行校验
组件定义：
可以校验传递进来的属性，例如：1. 校验类型 2. 是否必须传递 3. 提供默认值 4. 通过函数校验，如校验Number类型是否大于某个值
Vue.component("component-span-child-3", {
props: {
name: {
type: String,
require: true
},
persons: {
type: Number,
default: 1,
validator: function(value) {
return value > 0;
}
},
location: {
type: String,
default: "上海"
},
action: {
type: String,
default: "拉粑粑"
}
},
template: "<div><span>{{name}}和{{persons}}个人，去{{location}}里面{{action}}</span></div>"
})
模版中使用：
<div>
<h4>组件三-使用props对象传递参数，和校验</h4>
<component-span-child-3 name="小狗" :persons="persons" location="讲述郾城" action="去淘金啊"></component-span-child-3>
</div>
总结
父组件向子组件主要是通过props关键字，主要使用情况可以分为上面描述的三种。props的封装可以是一个数组，也可以是对象。
- 当使用数组封装props的时候，只是简单将父组件的参数传递给子组件使用，此处的参数可以是对象，字符串，number类型的数据
- 当使用对象封装props的时候，可以更加高级的校验参数，比如参数类型，默认值，参数大小等一系列校验。当不符合时候，可以看到Vue再控制台给出错误警告
熟练掌握父组件向子组件传递参数的方法，可以对Vue的关键部分更快的理解。
【转】Vue组件一-父组件传值给子组件的更多相关文章
- Vue组件通信父传方法给子组件调用
// 父组件中将 :meth='changeCom1' 传入入子组件 , 子组件运行 meth(i) 方法 并给他传参数 ,在父组件可以获取这个参数,并做相应的操作 // 父组件 <temp ...
- vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue中父组件使用props或者$attras向子组件中传值
知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题
说明: 近日开发中碰见一个很诡异的问题, 父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...
- vue 父组件动态传值至子组件
1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...
- vue父组件引用多个相同的子组件传值
没有什么问题是for 解决不了的,我一直深信这句话,当然这句话也是我说的 父组件引用多个相同的子组件传值问题 (这种情况很少遇到) 1 <template> 2 <div> 3 ...
- vue.js事件传值之子组件传向父组件以及$emit的使用
在项目开发中,有时候会遇到一种需求比如是:在子组件中,通过一个事件,比如点击事件,去改变父组件中的某个值,下面来看看是怎么个流程 还是先截图目录结构 父组件为app.vue,components中的文 ...
随机推荐
- 蓝桥杯试题----- 打印大X
打印大X 小明希望用星号拼凑,打印出一个大X,他要求能够控制笔画的宽度和整个字的高度.为了便于比对空格,所有的空白位置都以句点符来代替. 要求输入两个整数m n,表示笔的宽度,X的高度.用空格分开(0 ...
- Java多线程之wait、notify/notifyAll 详解，用wait 和notifyAll 以及synchronized实现阻塞队列，多线程拓展之ReentrantLock与Condition
前言:这几天看了很多关于多线程的知识,分享一波.(但是目前接触的项目还未用到过,最多用过线程池,想看线程池 请看我之前的博客) 关于基本的理论等 参考如下: https://www.cnblogs.c ...
- css3巧用选择器配合伪元素
一 . 前言 有时我们在写底部导航栏时,会有很多超链接,每个链接间用“|”分割,如下图: 可能刚入门的朋友会想到这样完成,再单独设置span的样式, 今天主要介绍怎么样用css3简单快速的完成这个效果 ...
- Codeforces617E(莫队)
E. XOR and Favorite Number time limit per test: 4 seconds memory limit per test: 256 megabytes input ...
- 2018-11-13 中文代码示例之Programming in Scala学习笔记第二三章
由于拷贝后文档格式有变, 仅摘几段如下. 完整而且代码带语法高亮的源版在: program-in-chinese/Programming_in_Scala_study_notes_zh 前言: 本书已 ...
- 【机器学习】Google机器学习工程的43条最佳实践
https://blog.csdn.net/ChenVast/article/details/81449509 本文档旨在帮助那些掌握机器学习基础知识的人从Google机器学习的最佳实践中获益.它提供 ...
- redis 数据库安装和基本使用
Redis 介绍: Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure server). Redis的键值可以包 ...
- 【PHPStorm使用手册】php interpreter is not configured
php interpreter is not configured 未配置php解析器 第一步: 引入下载好的php.exe 打开窗口 file -> settings -> Langua ...
- svn状态与常见错误
TortoiseSVN 1.6.16是最后一个目录独立管理自身cache的svn版本(每个目录下都有一个隐藏的.svn文件夹) 之后的版本会则会根目录上统一进行管理(只有根目录下有一个隐藏的.svn文 ...
- Linux中如何通过设备号找到设备
关于Linux中的设备文件,设备文件用来为操作系统和用户提供它们代表的设备接口.所有的Linux设备文件均位于/dev目录下,是根(/)文件系统的一个组成部分,因为这些设备文件在操作系统启动过程中必须 ...