vue父组件如何向子组件中传递数据?
props传参
父组件:
<template>
<parent>
<child :list="list"></child> //在这里绑定list对象
</parent>
</template>
import child from 'child.vue';
export default{
  components:{child},
  data(){
   return {
   //父组件的数据绑定到子组件的包裹层上 
  list:["haha","hehe","xixi"];
 }
}
子组件:(子组件要嵌套到父组件中)
child.vue
<template>
<ul>
<li v-for="(item ,index)in list">{{item}}</li>
</ul>
</template>
export default{
props:{
list:{
type:Array,//type为Array,default为函数
default(){
return [
"hahaxixihehe"//默认初始值
]}}
},//用props属性进行传数据,此时子组件已经获取到list的数据了
data(){
return {}
}
}
返回目录
vue父组件如何向子组件中传递数据?的更多相关文章
- vue中父组件给子组件传值,子组件给父组件传值
		
1.父组件传给子组件 父元素中 子元素中(通过props传值) 2.子组件传给父组件 子元素中(this.$emit(传过去的名字,传的参数)) 父元素中 通过changeShow的参数data 把修 ...
 - vue中使用ts后,父组件获取执行子组件方法报错问题
		
一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...
 - vue父组件促发子组件中的方法
		
实现在父组件中促发子组件里面的方法 子组件: <template> <div> 我是子组件 </div> </template> <script& ...
 - 【转】Vue组件一-父组件传值给子组件
		
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
 - 【vue】父组件主动调用子组件 /// 非父子组件传值
		
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
 - Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
		
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
 - vue  父组件给子组件传值,子组件给父组件传值
		
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
 - vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
		
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
 - vue 父组件主动获取子组件的数据和方法   子组件主动获取父组件的数据和方法
		
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
 
随机推荐
- Circular view path [mydemo]: would dispatch back to the current handler URL [/mydemo] again. Check your ViewResolver setup!
			
简单创建一个springboot工程 pom.xml <?xml version="1.0" encoding="UTF-8"?><proje ...
 - $ python manage.py makemigrations You are trying to add a non-nullable field 'name' to course without a default; we can't do that (the database needs something to populate existing rows). Please selec
			
问题: $ python manage.py makemigrationsYou are trying to add a non-nullable field 'name' to course wit ...
 - Call JMS Web Service
			
The content type application/json of the response message does not match the content type of the bin ...
 - BZOJ 1116 [POI2008]CLO-Toll 并查集
			
如果一个连通块是一个树的形态,则不合法,否则合法. 用并查集判断一下即可. #include <bits/stdc++.h> #define N 100005 #define M 2000 ...
 - Python实用黑科技——解包元素(1)
			
需求: 很多时候手上已经有了一个具有n个元素的列表或者元组,你打算把这些元素单独取出来(解包)放入n个变量组成的集合(这里的集合和Python自己的set不同)中. 方法: 显然,最好的办法就是直接用 ...
 - python定时任务-sched模块
			
通过sched模块可以实现通过自定义时间,自定义函数,自定义优先级来执行函数. schedule = sched.scheduler( time.time,time.sleep) schedule是一 ...
 - AcWing:240. 食物链(扩展域并查集 or 带边权并查集)
			
动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形. A吃B, B吃C,C吃A. 现有N个动物,以1-N编号. 每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人用 ...
 - lyc——2019.10.31
			
10:判决素数个数 总时间限制: 1000ms 内存限制: 65536kB 描述 输入两个整数X和Y,输出两者之间的素数个数(包括X和Y). 输入 两个整数X和Y(1 <= X,Y <= ...
 - BigDecimal常用的加减乘除算法、比较大小、不展示多余的零、保存两位小数点
			
项目中涉及到了BigDecimal的加.减.乘.比较大小.精确度的问题.所以在此总结一下,方便以后复习. //加法 BigDecimal coins = new BigDecimal("0& ...
 - Linux设备驱动程序 之 Makefile
			
典型的模块Makefile如下所示: ifneq ($(KERNELRELEASE),) obj-m := hello.o else KERNELDIR ?=/lib/modules/$(shell ...