总结vue中父向子，子向父以及兄弟之间通信的几种方式
2024-03-29 05:14:35
子向父方式1：通过props,如例子中子组件test1.vue向父组件App.vue传值
App.vue代码
<template>
<div id="app">
<test1 :parfn="parfn"></test1>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
export default {
name: 'App',
data () {
return {
msg: 'parent'
}
},
components: {test1},
methods: {
parfn: function (a) {
alert(a)
}
}
}
</script>
test1.vue代码
<template>
<div>i am test1</div>
</template> <script>
export default {
data () {
return {
msg: 'test1'
}
},
props: {
parfn: {
type: Function
}
},
created: function () {
this.parfn(this.msg)
}
}
</script>
效果图
子向父方式2：通过$parent
App.vue代码：
<template>
<div id="app">
<test1></test1>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
export default {
name: 'App',
data () {
return {
msg: 'parent'
}
},
components: {test1},
methods: {
parfn: function (a) {
alert(a)
}
}
}
</script>
test1.vue代码：
<template>
<div>i am test1</div>
</template> <script>
export default {
data () {
return {
msg: 'test1'
}
},
created: function () {
this.$parent.parfn(this.msg)
}
}
</script>
效果图：
子向父方式3:通过emit
App.vue代码
<template>
<div id="app">
<test1 @myfn="parfn"></test1>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
export default {
name: 'App',
data () {
return {
msg: 'parent'
}
},
components: {test1},
methods: {
parfn: function (a) {
alert(a)
}
}
}
</script>
test1.vue代码：
<template>
<div>i am test1</div>
</template> <script>
export default {
data () {
return {
msg: 'test1'
}
},
mounted: function () {
this.$emit('myfn', this.msg)
}
}
</script>
效果图：
父向子传值方式1：通过props
App.vue代码：
<template>
<div id="app">
<test1 :msg="msg"></test1>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
export default {
name: 'App',
data () {
return {
msg: 'parent'
}
},
components: {test1}
}
</script>
test1.vue代码：
<template>
<div>i am test1</div>
</template> <script>
export default {
props: ['msg'],
created: function () {
alert(this.msg)
}
}
</script>
效果图：
父向子方式2：通过$children
App.vue代码：
<template>
<div id="app">
<test1></test1>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
export default {
name: 'App',
data () {
return {
msg: 'parent'
}
},
mounted: function () {
this.$children[].childfn(this.msg)
},
components: {test1}
}
test1.vue代码
<template>
<div>i am test1</div>
</template> <script>
export default {
methods: {
childfn: function (a) {
alert(a)
}
}
}
</script>
效果图：
父向子方式3：通过ref
App.vue代码：
<template>
<div id="app">
<test1 ref="mychild"></test1>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
export default {
name: 'App',
data () {
return {
msg: 'parent'
}
},
mounted: function () {
this.$refs.mychild.childfn(this.msg)
},
components: {test1}
}
</script>
test1.vue代码：
<template>
<div>i am test1</div>
</template> <script>
export default {
methods: {
childfn: function (a) {
alert(a)
}
}
}
</script>
效果图：
兄弟间传值方式1：通过事件车,例如App.vue组件中两个兄弟组件test1.vue传值给test2.vue
步骤1：在外部如assets下创建bus.js
// bus.js
import Vue from 'vue'
export default new Vue()
步骤2：组件中引入相互传值的兄弟组件,如App.vue中test1组件传值给test2组件
<!--App.vue-->
<template>
<div id="app">
<test1></test1>
<test2></test2>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
import test2 from '@/components/test2.vue'
export default {
name: 'App',
components: {test1, test2}
}
</script>
步骤3：test1组件中引入bus，通过$emit发送事件
<template>
<div>
test1
<button @click="send">点击发送test1数据给test2</button>
</div>
</template> <script>
import bus from '@/assets/bus'
export default {
data () {
return {
msg: 'test1数据111'
}
},
methods: {
send: function () {
bus.$emit('myfn', this.msg)
}
}
}
</script>
步骤4：test2组件中引入bus，通过$on接收事件
<template>
<div>
i am test2，接收过来的数据为:{{msg}}
</div>
</template> <script>
import bus from '@/assets/bus'
export default {
data () {
return {
msg: ''
}
},
created: function () {
bus.$on('myfn', msg => {
this.msg = msg
})
}
}
</script>
效果图：
兄弟间传值方式2：子组件传数据给父，父再传给另一个兄弟组件，例如App.vue组件中两个兄弟组件test1.vue传值给test2.vue
步骤1：test1组件中通过$emit传递数据给父组件App.vue
<template>
<div>
test1
<button @click="send">点击发送test1数据给test2</button>
</div>
</template> <script>
export default {
data () {
return {
msg: 'test1数据111'
}
},
methods: {
send: function () {
this.$emit('myfn', this.msg)
}
}
}
</script>
步骤2：父组件App.vue中，通过v-bind绑定个属性传递给另一个子组件test2.vue
<!--App.vue-->
<template>
<div id="app">
<test1 @myfn="getmsg"></test1>
<test2 :msg="msg"></test2>
</div>
</template> <script>
import test1 from '@/components/test1.vue'
import test2 from '@/components/test2.vue'
export default {
name: 'App',
data () {
return {
msg: ''
}
},
methods: {
getmsg: function (msg) {
this.msg = msg
}
},
components: {test1, test2}
}
</script>
步骤3：test2.vue组件通过props接收父组件传递过来的参数
<template>
<div>
i am test2，接收过来的数据为:{{msg}}
</div>
</template> <script>
export default {
props: ['msg']
}
</script>
效果图：
最新文章
- xwalk_core_library-15.44.384 .13.aar 百度云分享
- Atitit Server Side Include  ssi服务端包含规范 csi  esi
- Android App启动错误的问题（connection to the server was unsuccessful）
- testng参数化方法：Parameters和DataProvider
- Tex使用
- 1176: [Balkan2007]Mokia - BZOJ
- HDU 5417 Victor and Machine
- 编写带参数decorator
- meta标签详解:源http://blog.csdn.net/kongjiea/article/details/17092413
- jQuery从入门到忘记
- Android视频编辑SDK--RDVECore来自锐动的无UI,高度抽象化API
- Struts1基础、使用Struts实现登录、使用Struts HTML标签简化开发
- Mac安装6.1.2版本Elasticsearch及优化配置实践
- 【重要】将项目发布到Maven中央库
- python - socketserver 模块应用
- jsp重新打开一个新的页面
- LeetCode——10. Regular Expression Matching
- kubernetes 垃圾回收机制
- GDI+绘制半圆按钮
- [笔记] Ubuntu 18.04源码编译安装OpenCV 4.0流程