vue父子传值,兄弟传值,子父传值详解,
3672Js.Com2021-11-08 00:45 来源:未知 阅读:11765 关注度5
vue父子传值,兄弟传值,子父传值详解,
目录
- 一、父组件向子组件传值
- 1.父组件.vue
- 2.子组件.vue
- 二、兄弟组件间传值还可以通过中间件Bus
- 1.A组件.js
- 2.B组件.js
- 三、子组件向父组件传值
- 1.父组件.js
- 2.子组件.js
- 总结:
一、父组件向子组件传值
1.父组件.vue
// 父组件中 <template> <div> <Child ref="child" :title="value"/> </div> </template> <script> export default { data() { return { value: 'hello world!' } } } </script>
2.子组件.vue
// 父组件中 <template> <div> <span>{{title}}</span> </div> </template> <script> export default { props: { title: { type: String, default: '' } } } </script>
//title值为'hello world!
二、兄弟组件间传值还可以通过中间件Bus
$emit
传值
$on
接收
$off
删除传输事件
1.A组件.js
this.$bus.$emit("flag",true)
2.B组件.js
mounted() { this.$bus.$off('flag') this.$bus.$on('flag', data=> { this.flag= data }) }
三、子组件向父组件传值
1.父组件.js
<template> <div> <Child ref="child" @getTitle="getTitle"/> </div> </template> <script> import Child from './components/Child' export default { components: { Child }, data() { return { } }, method:{ getTitle(data){ console.log(data) } } } </script>
打印结果为 hello xuliting
2.子组件.js
<template> <div> <span>{{title}}</span> </div> </template> <script> export default { data() { return { title: 'hello xuliting' } }, mounted(){ this.getFun() }, method:{ getFun(){ this.$emit("getTiltle",this.title) } } } </script>
总结:
组件间也可以通过传递方法从而解决。例如父组件为A,子组件有B和C。
父组件A调用子组件B的方法定义为aFun,把aFun传递给子组件C即可
这是在父组件中的组件C进行方法传递
<C :a-fun="aFun" />
引用的则是在组件C,通过props
props: { aFun: { type: Function, default: () => function() {} } }
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注3672js教程的更多内容!
您可能感兴趣的文章:- 浅谈Vue3 父子传值
- vue父子组件传值以及单向数据流问题详解
- vue父子组件的互相传值和调用
- 详解Vue的七种传值方式
- Vue父子组件传值的一些坑
- vue 子组件和父组件传值的示例
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭