vue父子组件通信的高级用法示例

前言

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

子通信父

父组件

<template>
<div class="parent">
我是父组件
<!--父组件监听子组件触发的say方法,调用自己的parentSay方法-->
<!--通过:msg将父组件的数据传递给子组件-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 参数就是子组件传递出来的数据
parentSay(msg){
console.log(msg) // hello, parent
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" @click="say">
我是子组件
<div>
父组件对我说:{{msg}}
</div>
</div>

</div>
</template>

<script>

export default {
//父组件通过props属性传递进来的数据
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},

methods: {
// 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
say(){
this.$emit('say' , this.childrenSay);
}
}
}
</script>

子组件使用$emit方法调用父组件的方法,达到子通信父的目的。

父通信子

父组件

<!--Html-->
<template>
<!--父组件触发click方法-->
<div class="parent" @click="say">
我是父组件
<!--通过ref标记子组件-->
<children ref="child"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: "hello,my son"
}
},
methods: {
// 通过$refs调用子组件的parentSay方法
say(){
this.$refs.child.parentSay(this.msg);
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
父组件对我说:{{msg}}
</div>
</div>

</div>
</template>

<script>

export default {
data () {
return {
msg: ''
}
},

methods: {
// 父组件调用的JavaScript方法parentSay
parentSay(msg){
this.msg = msg;
}
}
}
</script>

父组件通过 $refs 调用子组件的方法。

以上就是父子组件通信的方式,父子组件传递数据直接用props,或者使用 $emit 和 $refs 依靠事件来传递数据。

父子组件通信提升篇

上文中,子通信父是在 子中触发点击事件 然后调用父组件的方法,父通信子是在 父中触发点击事件 调用子组件的方法。但是实际情况中可能存在 子通信父时子组件不允许有点击事件 而事件在父中或者 父通信子时点击事件在子组件 中。

子通信父时击事件在父组件

这种情况其实很常见,例如提交一个表单时表单的内容为子组件,而保存按钮在父组件上。此时点击保存按钮想要获取子组件表单的值。这种情况下已经不单单是子通信父和父通信子了,需要将两者结合在一起使用才能完成整个通信过程。

实现的思路是在父组件中点击事件时,先通过父子通信调用子组件的方法,然后在子组件中的该方法里使用子父通信调用父组件的另一个方法并将信息传递回来。以下是代码演示:

父组件

<template>
<div class="parent" @click="getData">
我是父组件
<!--父组件监听子组件触发的transData方法,调用自己的transData方法-->
<!--通过ref标记子组件-->
<children ref="child" @transData="transData"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
getData(){
// 调用子组件的getData方法
this.$refs.child.getData();
},
// 参数就是子组件传递出来的数据
transData(msg){
console.log(msg) // hello, parent
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
子组件的数据:{{childrenSay}}
</div>
</div>

</div>
</template>

<script>

export default {
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
getData() {
this.$emit('transData' , this.childrenSay);
}
}
}
</script>

另一种情况思路也和这个一样,基础就在与父通信子和子通信父的灵活运用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Vue2.x中的父子组件相互通信的实现方法

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"

  • vue2利用Bus.js如何实现非父子组件通信详解

    前言 大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递.下面话不多说了,来一起看看详细的介绍吧. Bus.js可以是这样 import Vue from 'vue' export default new Vue() 在需要通信的组件都引入Bus

  • Vuejs第十篇之vuejs父子组件通信

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

  • vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • 详解Vue 非父子组件通信方法(非Vuex)

    一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件给子组件传子,使用props //父组件:parent.vue <template> <div> <child :vals = "msg"></child> </div> </template> <script&

  • Vue非父子组件通信详解

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了实现.先看下简单的通信效果: 就是点击了一个组件,另一个组件的数字递加. html如下: <div id="app"> <component-a></component-a> <com

随机推荐