组件间传值: 3种(1)

(1). 父->子:

	a. 为什么: 和面向对象不同!父组件中的数据成员,子组件无权直接使用!因为组件的模型数据都是自己专属!
	b. 何时: 只要子组件希望使用父组件中的数据成员时
	c. 如何: 2步: 
		1). 在父组件中,将子组件需要的成员绑定给一个自定义的属性。
			组件todo中: {
				data(){ return { tasks:[ xxx , xxx , ...] } }
				template:`
					...
					<todo-list :tasks="tasks">
					...
				`
           黑色的tasks不能改名,因为是父组件自己的数据成员。
           红色的tasks可以自定义名称,表示自定义的一个属性
           。但是,这里强烈建议 保持一致。因为程序中,任何位置,
           只要使用同一个对象,最好保持名称一致。否则会有歧义。
           :tasks="tasks" 的意思是将黑色的tasks数组,赋值给子组
           件上红色的自定义属性tasks。
		2). 在子组件中,通过props获得父组件放在子组件中的自定义属性值。
			子组件todoList中:{
				props:[ "tasks" ], 从tasks属性里,取出父亲给的tasks数组。
				结果: props中的变量用法和data中变量的用法完全一样。
				只不过data中的变量是自己定义的,props中的属性值来
				自于父组件给的。所以,子组件模板中可使用tasks属性
				中获得的父组件给的数组对象进行遍历和绑定。
				template:`
					... 
					<todo-item v-for="(t,i) of tasks">
				`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值