vue脚手架 笔记02
目次01 父组件给子组件传参
02 子组件给父组件传递参数
03 父组件与子组件之间实现双向数据绑定
04 父组件与子组件之间相互获取对象
05 ref属性
01 父组件给子组件传参
父组件给子组件传参
1 在父组件模板中找到子组件标签
2. 通过v-bind 绑定一个自界说属性名 值为传递的变量
3.在子组件的js的大括号里面 通过props注册传递过来的属性名
4.这个属性名就可以当做一个变量直接使用 大概js里面通过this.获取
父组件给子组件传参是单项数据绑定(单项数据流):
父组件页面加载时就传递过去
一旦在父组件中这个变量数据更改 子组件也同步更改
但是子组件无法直接修改父组件传递过去的数据
props接收数据的两种方式:
1. props:['变量1','变量2',...] 可以传递多个数据
2.props:{
父组件传过来的变量1:{
type:这个数据对应的构造函数名(大写的类型名)
default:如果父组件没有传递这个变量 那么默认值生效
}
}
02 子组件给父组件传递参数
子组件给父组件传递参数:
传参原理: 发布事件的方式举行传参
传参的步骤:
1.在子组件的恣意事件里面通过this.$emit方法
2.this.$emit('自界说事件名称',传递过去的数据可以是多个数据)
3.在父组件模板中找到子组件标签 通过@绑定自界说事件名称
4.值为父组件methods里面的一个函数名
5.这个驱动函数的形参接收传递过来的数据
6.如果想要这个数据在父组件的其他地方使用 可以通过data界说一个变量作为中转
03 父组件与子组件之间实现双向数据绑定
父组件与子组件之间实现双向数据绑定 是通过.sync(同步)事件修饰符实现的
实现步骤:
1.在父组件模板中的子组件标签上面
2.通过v-bind绑定自界说属性名.sync='要传递过去的变量'
3.子组件通过props注册传递过来的变量
4.子组件要修改这个变量 要通过 this.$emit方法
5.this.#emit('update:父组件传过来的变量名(也就是props里面注册的变量名)',修改的新值)
04 父组件与子组件之间相互获取对象
父组件与子组件之间直接获取对方的对象(口试题)
父组件可以直接获取子组件对象
而且可以直接利用子组件的data里面的数据大概methods里面的方法
父组件直接获取子组件对象:
this.$children[索引值]
索引是按照父组件模板中子组件的加载顺序盘算的
拿到子组件对象 就可以直接利用子组件的数和事件
子组件直接获取父组件对象
在子组件中通过this.$parent 直接能够获取当前子组件所在的父组件对象
也就是可以直接利用当前父组件的数和事件
以上两种方式用的很少
原因是不好维护 直接利用的都不在自己的组件里面 以是用的很少
05 ref属性
ref属性的作用:
1.如果ref属性界说在组件标签上面 那么能够是父组件直接获取子组件对象
不像$children返回的是一个数组 必要通过索引值获取指定子组件对象
ref是能够精准的获取子组件对象
在父组件中 通过this.$refs.ref属性的值 直接获取子组件对象
2. 如果ref属性界说在原生html标签上面:
那么能够获取当前标签的原生DOM对象
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]