vue.js学习笔记(三)--父子组件通信总结
来源:互联网 发布:linux 百度云盘同步 编辑:程序博客网 时间:2024/05/20 17:09
博客地址:https://fisher-zh.github.io
在使用Vue的过程中,如果需要进行父子组件间的通信,通过查阅官方文档
我们可以了解到只需要在子组件要显式地用 props选项声明它期待获得的数据,同时在其使用过程中传入相应的数据即可,例如:
Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像“this.message”这样使用 template: '<span>{{ message }}</span>'})
<child message="hello!"></child>
当然,这只是一个简单的例子,在实际的使用过程中,我们还可以在子组件中声明传入数据的类型和默认值,这些不展开讲解,查阅官方文档均可以找到满意的答案。
在vue中,prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。所以如果我们在子组件中想要传递给父组件某些信息的话,我们就需要用到另一种方法——vm.$emit
Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像“this.message”这样使用 template: '<span>{{ message }}</span>', methods: { triggerEvent() { // 传入事件名和需要传递的参数 this.$emit('eventName', args) } }})
<child @change="changeEvent" message="hello!"></child><!-- 在绑定事件的过程中,changeEvent方法并不需要传入参数,在之后使用的时候传入参数即可 -->
以上均为较常见的方法,在官方的文档中也有比较详尽的介绍。但是在之前的使用过程中,我需要在父组件中触发子组件的某个方法,这时候需要怎么做呢?在查阅文档的过程中并没有找到行之有效的办法,之后通过查阅资料发现我们可以通ref为子组件指定一个索引,之后通过索引获取子组件的事件,例:
<child ref="child" @change="changeEvent" message="hello!"></child>
this.$refs.child.childEventName// 通过这种方式可以获取到子组件的方法
阅读全文
0 0
- vue.js学习笔记(三)--父子组件通信总结
- vue学习笔记--父子组件通信
- 父子组件通信vue.js
- vue.js父子组件通信动态绑定
- 总结vue父子组件之间的通信
- vue 父子组件通信
- vue父子组件通信
- Vue父子组件通信
- Vue父子组件通信
- vue父子组件通信
- ReactJS学习笔记(三)-父子组件间的通信
- vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信
- vue 非父子组件通信
- vue父子组件简单通信
- Vue父子组件通信实践
- vue 非父子组件通信
- Vue.js父子组件和非父子组件间的传值通信
- Vue.js 父子组件通讯
- HDU 1242 Rescue(bfs+优先队列)
- 矢量线形符号文件格式设计
- C primer plus(编程练习)file-4.8-4
- java小项目-验证码的生成以及验证
- Linux启动管理
- vue.js学习笔记(三)--父子组件通信总结
- linux基本命令及操作2
- Zookeeper常用命令
- JS判断客户端是否是iOS或者Android手机移动端
- 111. Minimum Depth of Binary Tree
- Spring(前言)
- 使用kotlin开发springboot应用
- TensorFlow 文本识别
- 三进制小数 oj132